Categories
alignment centering css html layout

How to center an element horizontally and vertically

509

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>

1

816

  • Approach 1 – transform translateX/translateY:

    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%;
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}
<div class="container">
    <span>I'm vertically/horizontally centered!</span>
</div>

  • Approach 2 – Flexbox 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. Just don’t forget to add vendor prefixes for additional browser support (see example).

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

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

  • Approach 3 – table-cell/vertical-align: middle:

    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>

  • Approach 4 – Absolutely positioned 50% from the top with displacement:

    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>

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

    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>

9

  • 3

    Yes that works. I had already used to inline-flex on css3 so I completely forgot about how to take this aproach correctly. I really appreciate it, thank you very much.

    – shuji

    Oct 19, 2013 at 2:19


  • I opened all the “Fullscreen” example above, I noticed that vertical align is always a bit too much near bottom of the screen (with resolution 1920×1080, the label is 20 pixels too low in the screen). I implemented approach #2 in my webpage and got the same problem even if the div isn’t fullscreen. The problem is even worse in my webpage. (100px too low)…

    – AXMIM

    Jun 23, 2015 at 15:42


  • You may want to add Approach 6, using flexbox (works in IE9+, [90%+ browser market coverage](caniuse.com/#feat=flexbox)): display: flex in the parent, and align-self: center in the children.

    Jul 11, 2015 at 10:07

  • I changed a little Approach 2: jsfiddle.net/yeaqrh48/278. As a result, by reducing the height of the window, the text goes beyond the scope and it becomes impossible to see. How to solve this problem?

    – ollazarev

    Apr 8, 2016 at 20:57


  • 1

    @josh-crozier Just found a website with a link to your post in their css xd

    – zoran404

    Feb 14, 2020 at 14:09

42

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.

3

  • I believe the transform should be transform: translateX(50%) translateY(50%); instead. The transform above is not syntactically correct according to the Mozilla transform docs.

    – Eirik H

    Jun 3, 2016 at 6:47


  • 1

    @EirikH Not sure what you were looking at, but that syntax is just fine (and says so in the docs). Most of the transform values that can take an X and Y value have a basic function to take both and specialized functions to take just one.

    Mar 2, 2018 at 14:49


  • Blue ribbon winner right here!

    Apr 1 at 19:39

20

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>

2

  • thanks for your solution. Why min-height is 100% of viewport and not 50%?

    – Lucas

    Jan 16 at 22:27

  • 1

    @Lucas that’s because by default the body will have the height of its contents (two lines of text in this case). If you want to center vertically in something, this something needs a defined height (100%, 100px, etc…). 50vh would place the elements at 25% of the height of the viewport

    – Creaforge

    Jan 16 at 22:52