Flexbox CSS垂直对齐方式未完全居中

Question

I've used flexbox before for vertical alignment, but for the elements I'm using it on at the moment the alignment is very off-centre, particularly for the div in the JSFiddle example below, where adding a button to the same div that contains the rest of the text is making the alignment too low.

Code:

 #servicesGrid { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .service { width: 24.85%; height: 45%; background: #262626; display: block; float: left; margin: 0 0.2% 0 0; text-align: center; } #servicesGrid .service:nth-of-type(1) { width: 100%; margin: 0 0 0.2% 0; height: 80%; } #servicesGrid .service:nth-of-type(5) { margin-right: 0; } .serviceContent { margin: 0; width: 100%; height: 100%; display: flex; align-items: center; color: #fff; text-align: center; } .button { color: #fff; border: 2px solid #fff; border-radius: 15px; padding: 10px 20px 10px 20px; text-transform: uppercase; font-family: 'Effra-Regular'; text-decoration: none; transition: all linear 0.3s; -webkit-transition: all linear 0.3s; -moz-transition: all linear 0.3s; } .button:hover { color: #000; background: #fff; } 

 <div id="servicesGrid"> <div class="service"> <div class="serviceContent"> <div style="margin-left:auto; margin-right:auto"> <h1 style="font-size:40px; font-family:'Effra-Light'; margin-bottom:-10px">Service</h1> <h4>Lorem ipsum dolor sit amet</h4> <br/> <a href="#contactUs" class="button" alt="Find Out More Button">Find Out More</a> </div> </div> </div> </div> 

JSFiddle: https://jsfiddle.net/f92udw9v/2/ .

Answer 1

You have a few issues there:

1. Extra padding and margin (your button runs outside the .serviceContent).

2. The H1 at the top has a margin-top/bottom (probably user agent values) that distances it from the top of the .serviceContent.

Have a look at the changes I made to your jsfiddle .

          <div style="margin-left:auto; margin-right:auto;border: 1px solid yellow;"> 

            <h1 style="font-size:40px; font-family:'Effra-Light';margin-top: 0px;">Service</h1>

            <h4>Lorem ipsum dolor sit amet</h4>

            </br>

            <a href="#contactUs" class="button" alt="Find Out More Button" style="display: inline-block;">Find Out More</a>

        </div>

What I did was:

1. Set the link () display to inline-block
2. Removed the top margin on H1

This still feels a bit of a hack to me, yet works slightly better. You might want to consider to using a column based flex box for the content (with the proper spacing) without element level margin/padding.