Flexbox CSS Vertical Alignment not Completely Central

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/.

Flex alignment works by distributing free space in the container. If you have a single item to center, that's not a problem. However, if you add a second item, that will create an imbalance. Now your centering is off because there is more "weight" on one side. You can either balance it out with a counter-weight or use absolute positioning. These methods are detailed here: [Absolute positioning in flexbox](http://stackoverflow.com/q/36191516/3597276). — Michael Benjamin, Oct 06 '16 at 16:51
You have various heights at 100%, 45% and 80% respectively. It's quite hard to understand what you're trying to achieve. Do you want it vertically centered within a div that is 80% of the screen height? — SomeGuy, Oct 06 '16 at 16:53

score 0 · Accepted Answer · answered Oct 06 '16 at 17:03

You have a few issues there:

Extra padding and margin (your button runs outside the .serviceContent).
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:

Set the link () display to inline-block
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.

Flexbox CSS Vertical Alignment not Completely Central

1 Answers1