With CSS 3, are there any way to vertically align an block element? Do you have an example? Thank you.
-
1It isn't a CSS 3 way ...– thoMar 23, 2011 at 23:25
-
2@Tho Yes it is. CSS 3 is a superset of CSS 2.– Šime VidasMar 23, 2011 at 23:27
-
3Ok, you're right, i agree with your affirmation... but does css3 provides something easier? Thank you.– thoMar 23, 2011 at 23:28
-
1Another 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.– BoltClockMar 23, 2011 at 23:35
-
6slides.html5rocks.com/#flex-box-2– thoMar 23, 2011 at 23:42
8 Answers
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:
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 *).
-
3Best solution ever. Don't forget to use Modernizr's csstransforms detection :-) Apr 21, 2013 at 14:14
-
9Be 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– LaithJul 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/…).– nickbAug 30, 2014 at 9:44 -
13seems 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 :) 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
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;
}
-
1This 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. Jan 26, 2012 at 23:03
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
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
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.
-
This requires the parent to be positioned (i.e.
position: relative
).– alekosotJun 22, 2015 at 11:24
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.)
-
1You 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! May 18, 2016 at 15:36
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
}
You can vertically align by setting an element to display: inline-block, then setting vertical-align: middle;
-
1Actually 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.– ArtvaderOct 12, 2017 at 9:03