74

With CSS 3, are there any way to vertically align an block element? Do you have an example? Thank you.

10
  • 1
    It isn't a CSS 3 way ...
    – tho
    Mar 23, 2011 at 23:25
  • 2
    @Tho Yes it is. CSS 3 is a superset of CSS 2. Mar 23, 2011 at 23:27
  • 3
    Ok, you're right, i agree with your affirmation... but does css3 provides something easier? Thank you.
    – tho
    Mar 23, 2011 at 23:28
  • 1
    Another example of CSS3 being an overhyped buzzword. CSS3 is simply CSS level 3. Any CSS1 and CSS2.x code is also valid CSS3, get over it.
    – BoltClock
    Mar 23, 2011 at 23:35
  • 6
    slides.html5rocks.com/#flex-box-2
    – tho
    Mar 23, 2011 at 23:42

8 Answers 8

88

Was looking at this problem recently, and tried:

HTML:

<body>
    <div id="my-div"></div>
</body>

CSS:

#my-div {               
    position: absolute;
    height: 100px;
    width: 100px;    
    left: 50%;
    top: 50%;
    background: red;
    transform: translate(-50%, -50%);    
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}

Here's the Fiddle:

http://jsfiddle.net/sTcp9/6/

It even works when using "width/height: auto", in the place of fixed dimensions. Tested on the latest versions on Firefox, Chrome, and IE (* gasp *).

7
  • 3
    Best solution ever. Don't forget to use Modernizr's csstransforms detection :-)
    – myfreeweb
    Apr 21, 2013 at 14:14
  • 9
    Be very careful with this approach. Translating an element uses the GPU, which ends up calculating Pixels as floating points. Therefore, you can end up moving an object at a sub-pixel value and get blurry results. Check out this article for more detail: martinkool.com/post/27618832225/beware-of-half-pixels-in-css
    – Laith
    Jul 17, 2013 at 23:30
  • To avoid blurry results due to the "half pixel" issue, try adding transform-style: preserve-3d; to the parent element (source: zerosixthree.se/…).
    – nickb
    Aug 30, 2014 at 9:44
  • 13
    seems like w3.org likes your method. they put this up on their site w3.org/Style/Examples/007/center.en.html#vertical Good solution mate :)
    – trve.fahad
    Sep 13, 2014 at 5:16
  • 1
    @n611x007 you don't need to set the left style to be vertically aligned. setting left and translateX will align the content horizontally and setting top and translateY will align the content vertically. Feb 13, 2016 at 11:23
34

Note: This example uses the draft version of the Flexible Box Layout Module. It has been superseded by the incompatible modern specification.

Center the child elements of a div box by using the box-align and box-pack properties together.

Example:

div
{
width:350px;
height:100px;
border:1px solid black;

/* Internet Explorer 10 */
display:-ms-flexbox;
-ms-flex-pack:center;
-ms-flex-align:center;

/* Firefox */
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;

/* Safari, Opera, and Chrome */
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;

/* W3C */
display:box;
box-pack:center;
box-align:center;
} 
1
  • 1
    This is what I was looking for: new additions to CSS (i.e. CSS3) that make it easier than all the old CSS1/2 hacks. Thanks.
    – thaddeusmt
    Jan 26, 2012 at 23:03
34

Using Flexbox:

<style>
  .container {
    display: flex;
    align-items: center; /* Vertical align */
    justify-content: center; /* Horizontal align */
  }
</style>

<div class="container">
  <div class="block"></div>
</div>

Centers block inside container vertically (and horizontally).

Browser support: http://caniuse.com/flexbox

9

a couple ways:

1. Absolute positioning-- you need to have a declared height to make this work:

<div>
   <div class='center'>Hey</div>
</div>

div {height: 100%; width: 100%; position: relative}
div.center {
     width: 100px;
     height: 100px;
     top: 50%;
     margin-top: -50px;
}

*2. Use display: table http://jsfiddle.net/B7CpL/2/ *

<div>
     <img src="/img.png" />
     <div class="text">text centered with image</div>
</div>


div {
     display: table;
     vertical-align: middle
}

div img,
div.text {
     display: table-cell;
     vertical-align: middle
}
  1. A more detailed tutorial using display: table

http://css-tricks.com/vertically-center-multi-lined-text/

3

There is a simple way to align vertically and horizontally a div in css.

Just put a height to your div and apply this style

.hv-center {
    margin: auto;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
}

Hope this helped.

1
  • This requires the parent to be positioned (i.e. position: relative).
    – alekosot
    Jun 22, 2015 at 11:24
2

I always using tutorial from this article to center things. It's great

div.container3 {
   height: 10em;
   position: relative }              /* 1 */
div.container3 p {
   margin: 0;
   position: absolute;               /* 2 */
   top: 50%;                         /* 3 */
   transform: translate(0, -50%) }   /* 4 */

The essential rules are:

  1. Make the container relatively positioned, which declares it to be a container for absolutely positioned elements.
  2. Make the element itself absolutely positioned.
  3. Place it halfway down the container with 'top: 50%'. (Note that 50%' here means 50% of the height of the container.)
  4. Use a translation to move the element up by half its own height. (The '50%' in 'translate(0, -50%)' refers to the height of the element itself.)
2
  • 1
    You can use translateY(-50%) to just set the Y axis. Set transform-style: preserve-3d; to prevent blurry text on half pixel values and be sure to include vendor prefixes for transform and transform-style. Feb 13, 2016 at 11:31
  • Found this answer by finding the w3 center example..then found the w3 center example by finding this answer. Excel said it best; Circular reference detected!
    – panhandel
    May 18, 2016 at 15:36
0

Try this also work perfectly:

html:

   <body>
    <div id="my-div"></div>
   </body>

css:

#my-div {               
    position: absolute;
    height: 100px;
    width: 100px;    
    left: 50%;
    top: 50%;
    background: red;
    display: table-cell;
    vertical-align: middle

}
-1

You can vertically align by setting an element to display: inline-block, then setting vertical-align: middle;

1
  • 1
    Actually it's not far off. You can add another element before this one (or use a :before psuedo element on the parent). Then have that new element have a 100% height and 1px width and a margin-left:-1px. Then give it an inline-block and vertical-align:middle css property. Then you have to make sure that the parent element has a defined height.
    – Artvader
    Oct 12, 2017 at 9:03

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.