Vertical centre slightly off in grid

[Andrew Poulos]

I have this html

<div id="outer">
<div id="inner"></div>
</div>

and this CSS

#outer {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr 2fr 1fr;
row-gap: 8px;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
padding: 20px 0 0 10px;
}

#inner {
width: 10%;
height: 98%;
margin: 1% 0% 0% 22%;
place-self: start;
grid-column: 1 / -1;
grid-row: 1 / -1;
}

With a top margin of 1% and a height of 98% I was expecting (hoping)
#inner would be vertically centred on the three grid rows but it is
offset down a few pixels.

I did a screen capture to check all the dimensions and:

- the height of #outer, not including padding, is 590 pixels.
- the height of #outer, including padding, is 620 pixels.
- the height of #inner is 578 pixels high which is 98% of 590 ie correct.
- the top margin is 9 pixels high which is 1.5+% and not 1%. If worked
out from the full height of #outer 1% would be 6 pixels.
- the right margin percentage correctly matches the pixel dimension I
measured.

What could be causing the top margin to be slightly (but noticeably)
larger than it "should" be?

Andrew Poulos

[😉 Good Guy 😉]

On 04/02/2021 05:06, Andrew Poulos wrote:

What could be causing the top margin to be slightly (but noticeably) larger than it "should" be?

It could be that you are using margins all over the place and/or not using the Grid css as intended.

I suggest start with the following css and then tweak it as desired

    
        * {
            box-sizing: border-box;
            padding: 0;
            margin: 0;
        }

        #outer {
            display: grid;
            grid-template-columns: 1fr;
            grid-template-rows: 1fr 2fr 1fr;
            gap: 8px;
            height: 100px; 
            border: 2px solid red;
            justify-items: center;
            align-self: center;
        }

        #inner {
            grid-column: 1 / -1;
            grid-row: 1 / -1;
            border: 2px solid blue;
            justify-items: center;
            align-self: center;
            padding: 10px;
        }

    

--

With over 1.2 billion devices now running Windows 10, customer satisfaction is higher than any previous version of windows.