How to center an element horizontally and vertically

by

I am trying to center my tabs content vertically, but when I add the CSS style display:inline-flex, the horizontal text-align disappears.

How can I make both text alignments x and y for each of my tabs?

* { box-sizing: border-box; }
#leftFrame {
  background-color: green;
  position: absolute;
  left: 0;
  right: 60%;
  top: 0;
  bottom: 0;
}
#leftFrame #tabs {
  background-color: red;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 25%;
}
#leftFrame #tabs div {
  border: 2px solid black;
  position: static;
  float: left;
  width: 50%;
  height: 100%;
  text-align: center;
  display: inline-flex;
  align-items: center;
}
<div id=leftFrame>
  <div id=tabs>
    <div>first</div>
    <div>second</div>
  </div>
</div>

CSS flexbox / grid method:

Example Here / Full Screen Example

In supported browsers, set the display of the targeted element to flex and use align-items: center for vertical centering and justify-content: center for horizontal centering. Remember the parent container will also need height (in this case, 100%).

html, body, .container {
    height: 100%;
}

.container {
    display: flex;
    align-items: center;
    justify-content: center;
}
<div class="container"> 
  <span>I'm vertically/horizontally centered!</span>
</div>

transform translateX/translateY method:

Example Here / Full Screen Example

In supported browsers (most of them), you can use top: 50%/left: 50% in combination with translateX(-50%) translateY(-50%) to dynamically vertically/horizontally center the element.

.container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}
<div class="container">
    <span>I'm vertically/horizontally centered!</span>
</div>

table-cell/vertical-align: middle method:

Example Here / Full Screen Example

In some cases, you will need to ensure that the html/body element’s height is set to 100%.

For vertical alignment, set the parent element’s width/height to 100% and add display: table. Then for the child element, change the display to table-cell and add vertical-align: middle.

For horizontal centering, you could either add text-align: center to center the text and any other inline children elements. Alternatively, you could use margin: 0 auto, assuming the element is block level.

html, body {
    height: 100%;
}
.parent {
    width: 100%;
    height: 100%;
    display: table;
    text-align: center;
}
.parent > .child {
    display: table-cell;
    vertical-align: middle;
}
<section class="parent">
    <div class="child">I'm vertically/horizontally centered!</div>
</section>

Absolutely positioned 50% from the top with displacement method:

Example Here / Full Screen Example

This approach assumes that the text has a known height – in this instance, 18px. Just absolutely position the element 50% from the top, relative to the parent element. Use a negative margin-top value that is half of the element’s known height, in this case – -9px.

html, body, .container {
    height: 100%;
}

.container {
    position: relative;
    text-align: center;
}

.container > p {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    margin-top: -9px;
}
<div class="container">
    <p>I'm vertically/horizontally centered!</p>
</div>

The line-height method (Least flexible – not suggested) method:

Example Here

In some cases, the parent element will have a fixed height. For vertical centering, all you have to do is set a line-height value on the child element equal to the fixed height of the parent element.

Though this solution will work in some cases, it’s worth noting that it won’t work when there are multiple lines of text – like this.

.parent {
    height: 200px;
    width: 400px;
    background: lightgray;
    text-align: center;
}

.parent > .child {
    line-height: 200px;
}
<div class="parent">
    <span class="child">I'm vertically/horizontally centered!</span>
</div>

If CSS3 is an option (or you have a fallback) you can use transform:

.center {
    right: 50%;
    bottom: 50%;
    transform: translate(50%,50%);
    position: absolute;
}

Unlike the first approach above, you don’t want to use left:50% with the negative translation because there’s an overflow bug in IE9+. Utilize a positive right value and you won’t see horizontal scrollbars.

Here is how to use two simple flexbox properties to center n divs on the two axes:

  • Set the height of your container: Here the body is set to be at least 100 viewport height.
  • align-items: center; will center the blocks vertically if flex direction is row else horizontally if flex direction is column
  • justify-content: space-around; will distribute the free space vertically if flex direction is row else horizontally if flex direction is column around the div elements
body {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: space-around;
}
<div>foo</div>
<div>bar</div>

The best way to center a box both vertically and horizontally, is to use two containers :

The outher container :

  • should have display: table;

The inner container :

  • should have display: table-cell;
  • should have vertical-align: middle;
  • should have text-align: center;

The content box :

  • should have display: inline-block;
  • should adjust the horizontal text-alignment, unless you want text to be centered

Demo :

body {
    margin : 0;
}

.outer-container {
    display: table;
    width: 80%;
    height: 120px;
    background: #ccc;
}

.inner-container {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.centered-content {
    display: inline-block;
    text-align: left;
    background: #fff;
    padding : 20px;
    border : 1px solid #000;
}
<div class="outer-container">
   <div class="inner-container">
     <div class="centered-content">
        Center this!
     </div>
   </div>
</div>

See also this Fiddle!

Centering in the middle of the page:

To center your content in the middle of your page, add the following to your outer container :

  • position : absolute;
  • width: 100%;
  • height: 100%;

Here’s a demo for that :

body {
    margin : 0;
}

.outer-container {
    position : absolute;
    display: table;
    width: 100%;
    height: 100%;
    background: #ccc;
}

.inner-container {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.centered-content {
    display: inline-block;
    text-align: left;
    background: #fff;
    padding : 20px;
    border : 1px solid #000;
}
<div class="outer-container">
   <div class="inner-container">
     <div class="centered-content">
        Center this!
     </div>
   </div>
</div>

See also this Fiddle!

Leave a Comment