Align vertically using CSS 3

Question

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

Ok, you're right, i agree with your affirmation... but does css3 provides something easier? Thank you. — tho, Mar 23 '11 at 23:28
@Šime Vidas - Nothing in your markup contains any CSS3 property. It's all CSS2.1. — Rob, Mar 23 '11 at 23:29
@Rob My first property is `width`. It is a CSS 3 property - see here: http://www.w3.org/TR/css3-box/#the-lsquo0 — Šime Vidas, Mar 23 '11 at 23:31
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 '11 at 23:35
@BoltClock What I think he means is, "Is there any method defined in the CSS level 3 spec for vertically aligning content?" — 1.21 gigawatts, Feb 13 '16 at 11:22

Charlie · Answer 1 · 2013-04-22T14:39:06.580

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 *).

edited Apr 22 '13 at 14:39

answered Apr 16 '13 at 00:38

Charlie

4,197
5
42
59

3

Best solution ever. Don't forget to use Modernizr's csstransforms detection :-) – myfreeweb Apr 21 '13 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: http://martinkool.com/post/27618832225/beware-of-half-pixels-in-css – Laith Jul 17 '13 at 23:30
To avoid blurry results due to the "half pixel" issue, try adding `transform-style: preserve-3d;` to the parent element (source: http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/). – nickb Aug 30 '14 at 09:44
13

seems like w3.org likes your method. they put this up on their site http://www.w3.org/Style/Examples/007/center.en.html#vertical Good solution mate :) – trve.fahad Sep 13 '14 at 05:16
Adding `transform-style: preserve-3d;` broke it up for me (FF, Chrome, Opera): http://jsfiddle.net/sTcp9/455/ – ile Nov 22 '14 at 04:19
Another solution is setting top, right, bottom, left as 0 and margin: auto – Kyle Horkley Nov 18 '15 at 00:58
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. – 1.21 gigawatts Feb 13 '16 at 11:23

multitask landscape · Answer 2 · 2020-03-29T14:44:36.607

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

edited Mar 29 '20 at 14:44

answered Nov 30 '12 at 09:43

multitask landscape

8,273
3
33
31

score 34 · Answer 3 · edited Oct 28 '14 at 05:25

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;
}

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 '12 at 23:03

score 9 · Answer 4 · answered Jan 14 '12 at 07:46

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
}

A more detailed tutorial using display: table

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

score 3 · Answer 5 · answered May 05 '14 at 14:02

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.

answered May 05 '14 at 14:02

Edouard Kombo

505
7
7

This requires the parent to be positioned (i.e. `position: relative`). – alekosot Jun 22 '15 at 11:24

score 2 · Answer 6 · answered Oct 10 '15 at 09:50

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:

Make the container relatively positioned, which declares it to be a container for absolutely positioned elements.
Make the element itself absolutely positioned.
Place it halfway down the container with 'top: 50%'. (Note that 50%' here means 50% of the height of the container.)
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.)

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. — 1.21 gigawatts, Feb 13 '16 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 '16 at 15:36

score 0 · Answer 7 · answered Mar 12 '14 at 08:48

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

}

Dave · Answer 8 · 2012-12-11T21:19:38.613

-1

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

edited Dec 11 '12 at 21:19

answered Mar 24 '11 at 02:25

Dave

28,833
23
113
183

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 '17 at 09:03

Align vertically using CSS 3

8 Answers8

Linked