I am facing an issue centered horizontally and vertically within wrapping divs (blue frame) in a large div (green frame with a height of 100%).
I was recommended to use the flex display, but there were significant gaps between the lines and I want the elements to only have the spacing that I set for them (e.g., margin: 10px).
https://i.sstatic.net/X7miE.png
The code has been uploaded on CodePen: https://codepen.io/misiekdp/pen/ZEWgagr or view the working snippet below:
body {
margin: 0;
}
.wrapper h1 {
margin: 0;
text-align: center;
font-size: 30px;
}
#x1 {
height: calc(100% - 58px);
margin: 10px;
border: 1px solid green;
/* padding: 5px; */
/* position: relative; */
/* transform: translateX(10%) translateY(50%); */
position: absolute;
/* top: 50% */
display: flex;
flex-direction: row;
text-align: center;
flex-wrap: wrap;
justify-content: center;
}
.jajucho {
/* position: absolute; */
/* display: block; */
display: inline-block;
height: 100px;
margin: 10px;
width: 100px;
border: 1px solid blue;
align-items: center;
text-align: center;
justify-content: center;
/* display: flex; */
/* position: absolute; */
}<div class="wrapper">
<h1>Menu</h1>
<div id="x1">
<div class="jajucho">
</div>
<div class="jajucho">
</div>
<div class="jajucho">
</div>
<div class="jajucho">
</div>
<div class="jajucho">
</div>
<div class="jajucho">
</div>
<div class="jajucho">
</div>
<div class="jajucho">
</div>
<div class="jajucho">
</div>
<div class="jajucho">
</div>
<div class="jajucho">
</div>
<div class="jajucho">
</div>
<div class="jajucho">
</div>
</div>