nickck15 nickck15 - 4 months ago 19
CSS Question

Flexbox CSS Vertical Alignment not Completely Central

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.


#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>
<a href="#contactUs" class="button" alt="Find Out More Button">Find Out More</a>



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>


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


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.