By Irakli Lekishvili


2012-01-14 21:25:10 8 Comments

I have a div element which contains text, and I want to align the contents of this div vertically center.

Here is my div style:

#box {
  height: 170px;
  width: 270px;
  background: #000;
  font-size: 48px;
  color: #FFF;
  text-align: center;
}
<div id="box">
  Lorem ipsum dolor sit
</div>

What is the best way to do this?

30 comments

@Danield 2014-03-06 08:15:10

Another way (not mentioned here yet) is with Flexbox.

Just add the following code to the container element:

display: flex;
justify-content: center; /* align horizontal */
align-items: center; /* align vertical */

Flexbox demo 1

.box {
  height: 150px;
  width: 400px;
  background: #000;
  font-size: 24px;
  font-style: oblique;
  color: #FFF;
  text-align: center;
  padding: 0 20px;
  margin: 20px;
  display: flex;
  justify-content: center;
  /* align horizontal */
  align-items: center;
  /* align vertical */
}
<div class="box">
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
</div>

Alternatively, instead of aligning the content via the container, flexbox can also center the a flex item with an auto margin when there is only one flex-item in the flex container (like the example given in the question above).

So to center the flex item both horizontally and vertically just set it with margin:auto

Flexbox Demo 2

.box {
  height: 150px;
  width: 400px;
  background: #000;
  font-size: 24px;
  font-style: oblique;
  color: #FFF;
  text-align: center;
  padding: 0 20px;
  margin: 20px;
  display: flex;
}
.box span {
  margin: auto;
}
<div class="box">
  <span>margin:auto on a flex item centers it both horizontally and vertically</span> 
</div>

NB: All the above applies to centering items while laying them out in horizontal rows. This is also the default behavior, because by default the value for flex-direction is row. If, however flex-items need to be laid out in vertical columns, then flex-direction: column should be set on the container to set the main-axis as column and additionally the justify-content and align-items properties now work the other way around with justify-content: center centering vertically and align-items: center centering horizontally)

flex-direction: column demo

.box {
  height: 150px;
  width: 400px;
  background: #000;
  font-size: 18px;
  font-style: oblique;
  color: #FFF;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* vertically aligns items */
  align-items: center;
  /* horizontally aligns items */
}
p {
  margin: 5px;
  }
<div class="box">
  <p>
    When flex-direction is column...
  </p>
  <p>
    "justify-content: center" - vertically aligns
  </p>
  <p>
    "align-items: center" - horizontally aligns
  </p>
</div>

A good place to start with Flexbox to see some of its features and get syntax for maximum browser support is flexyboxes

Also, browser support nowadays is very good: caniuse

For cross-browser compatibility for display: flex and align-items, you can use the following:

display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-flex-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;

@user 2014-03-07 18:25:57

@Andrew Bringaze 2014-07-09 13:29:14

+1 this works well when divs take up the entire width of the screen

@Antonio Ooi 2014-08-21 11:41:01

This works well for me too, the rest of the above not working on my site. But visual studio does not recognize display: flex.

@Andrew Hoffman 2015-03-09 16:35:32

IE = we can never have nice things

@Erik Aigner 2015-05-10 17:15:28

The fiddle does not work at all, text is still on the top edge

@gonzo 2015-05-17 18:52:10

image with max-width: 100%; has an issue on firefox Kindly check this link jsfiddle.net/q2wrryjz/1

@Youkko 2015-05-22 15:44:08

+1 for this approach, which is new to me. You taught me something new today, thanks. Btw, differently from the proposed answer, your solution worked for my case.

@Frank 2015-08-17 17:29:15

THIS IS THE BOMB!!!! This works like a boss in Chrome and Android Chrome browsers.

@Ayyaz Zafar 2015-10-23 15:40:02

Good try but this method does not work in safari.

@Royalty 2015-10-28 22:59:30

Not sure about safari but this does not work in Samsung phones with the default browser (specialized android browser). If you care about that then keep this in mind.

@Chemical Programmer 2016-01-25 11:50:20

With alpha blended image here : jsfiddle.net/qq9uv4gf

@lyhong 2016-03-13 15:00:27

if I have some tag <p> inside, every text appears in the same line. How to make it break line?

@Danield 2016-03-13 22:24:29

@lyhong - I updated the post to cover flex-direction: column - I think this is what you want - right?

@think01 2017-07-04 15:54:16

It doesn't work with text in multiple lines? At least for me (a div inside an overlay). EDIT: adding text-align: center did the trick! Thanks!

@Long Tran 2018-11-25 12:26:34

Although there are a lot of solutions. But here is another option using flexbox.

html

<div id="container">
  <div class="child">
    <span
      >Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae,
      nemo.</span
    >
  </div>
</div>

css

  #container {
    display: flex;
  }

  .child {
    margin: auto;
  }

result

enter image description here

@MAChitgarha 2016-12-13 20:09:41

Flexboxes that were introduced in CSS3 are the solution:

section {
    display: flex;
    display: -webkit-flex;
    height: 200px;
    width: 50%;
    margin: auto;
    border-radius: 20px;
    border: 3px solid orange;
    background-color: gold;
}

p {
    margin: auto; /* Important */
    text-align: center;
    font-family: Calibri;
    background-color: yellow;
    border-radius: 20px;
    padding: 15px;
}
<section>
    <p>
        I'm centered!<br/>
        Flexboxes are great!
    </p>
</section>

Note: Replace the line above which marked as important with one of these lines, if you want to center the text:

1) Only vertically:

margin: auto 0;

2) Only horizontally:

margin: 0 auto;

UPDATE: As I noticed, this trick works with grids (display: grid), also.

@elena 2018-05-17 13:12:45

Could you please explain why does flex have this effect in this case on centering the paragraph?

@MAChitgarha 2018-05-30 12:17:37

@elena In fact, I don't know exactly why, I discovered when I was trying. However, it would be a consideration for newer versions of CSS. For instance, if you change the display to grid in this case, it will be worked as the same as flexboxes. I think grids and flexboxes comes with new features to compensate the previous faults of CSS; and this trick is one of them.

@Sivaprakash D 2018-10-23 05:44:07

You can use the positioning method in CSS:

Check the result here....

HTML:

<div class="relativediv">
  <p>
    Make me vertical align as center
  </p>
</div>

CSS:

.relativediv{position:relative;border:1px solid #ddd;height:300px;width:300px}
.relativediv p{position:absolute:top:50%;transfrom:translateY(-50%);}

Hope you use this method too.

@Nikit Barochiya 2017-03-17 05:00:33

<!DOCTYPE html>
<html>
  <head>
    <style>
      .main{
        height:450px;
        background:#f8f8f8;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -ms-flex-align: center;
        -webkit-box-align: center;
        align-items: center;
        justify-content: center;
        width: 100%;
      }
    </style>
  </head>
  <body>
    <div class="main">
      <h1>Hello</h1>
    </div>
  </body>
</html>

@Mohammad Fathi MiMFa 2018-08-20 07:50:18

This is easy and very short:

.block {
  display: table-row;
  vertical-align: middle;
}

.tile {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  width: 500px;
  height: 100px;
}
<div class="body">
  <span class="tile">
    Hello middle world! :)
  </span>
</div>

@Alex Riabov 2018-08-20 08:12:40

While this code may answer the question, providing additional context regarding why and/or how this code answers the question improves its long-term value.

@ArifMustafa 2018-07-03 15:34:01

Absolute Positioning and Stretching

As with the method above this one begins by setting positioning on the parent and child elements as relative and absolute respectively. From there things differ.

In the code below I’ve once again used this method to center the child both horizontally and vertically, though you can use the method for vertical centering only.

html

<div id="parent">
    <div id="child">Content here</div>
</div>

css

#parent {position: relative;}
#child {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 50%;
    height: 30%;
    margin: auto;
}

The idea with this method is to try to get the child element to stretch to all 4 edges by setting the top, bottom, right, and left vales to 0. Because our child element is smaller than our parent elements it can’t reach all 4 edges.

Setting auto as the margin on all 4 sides however causes opposite margins to be equal and displays our child div in the center of the parent div.

Unfortunately the above won’t work in IE7 and below and like the previous method the content inside the child div can grow too large causing it to be hidden.

@Kumar 2018-05-24 11:01:02

Even better idea for this. You can do like this too

body,
html {
  height: 100%;
}

.parent {
  white-space: nowrap;
  height: 100%;
  text-align: center;
}

.parent:after {
  display: inline-block;
  vertical-align: middle;
  height: 100%;
  content: '';
}

.centered {
  display: inline-block;
  vertical-align: middle;
  white-space: normal;
}
<div class="parent">
  <div class="centered">
    <p>Lorem ipsum dolor sit amet.</p>
  </div>
</div>

@URL87 2016-07-13 15:31:27

Set it within button instead of div if you don't care about its little visual 3D effect.

#box
{
  height: 120px;
  width: 300px;
  background: #000;
  font-size: 48px;
  font-style: oblique;
  color: #FFF;
}
<button Id="box" disabled>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</button>

@Akshay Pethani 2017-05-28 07:41:45

You can use the following code snippet as the reference. It is working like a charm for me:

<!DOCTYPE html>
    <html lang="de">
        <head>
            <title>Vertically Center Text</title>
            <style>
                html, body {
                    height: 100%;
                    margin: 0;
                    padding: 0;
                    width: 100%;
                }
                body {
                    display: table;
                }
                .centered-text {
                    text-align: center;
                    display: table-cell;
                    vertical-align: middle;
                }
            </style>
        </head>

        <body style="background:#3cedd5">
            <div class="centered-text">
                <h1>Yes, it's my landing page</h1>
                <h2>Under construction, coming soon!!!</h2>
            </div>
        </body>
    </html>

The output of the above code snippet is as follow:

Enter image description here

Source code credit: How do I vertically center text with CSS? - Code Puran

@Rafiqul Islam 2017-11-23 19:22:36

Try the following code:

display: table-cell;
vertical-align: middle;

div {
  height: 80%;
  width: 100%;
  text-align: center;
  display: table-cell;
  vertical-align: middle;
  background: #4CAF50;
  color: #fff;
  font-size: 50px;
  font-style: italic;
}
<div>
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
</div>

@Saravana priyan S 2018-02-28 06:25:34

I saw the previous answers, and they will work only for that width of screen (not responsive). For the responsive you have to use flex.

Example:

div{ display:flex; align-item:center;}

@Caner 2018-01-02 10:21:56

The following code will put the div in the middle of the screen regardless of screen size or div size:

.center-screen {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  min-height: 100vh;
}
 <html>
 <head>
 </head>
 <body>
 <div class="center-screen">
 I'm in the center
 </div>
 </body>
 </html>

See more details about flex here.

@Pranav Singh 2015-06-29 09:26:47

The solution accepted as the answer is perfect to use line-height the same as the height of div, but this solution does not work perfectly when text is wrapped OR is in two lines.

Try this one if text is wrapped or is on multiple lines inside a div.

#box
{
  display: table-cell;
  vertical-align: middle;
}

For more reference, see:

@Michiel van Oosterhout 2012-01-14 21:26:33

You can try this basic approach:

div {
  height: 90px;
  line-height: 90px;
  text-align: center;
  border: 2px dashed #f69c55;
}
<div>
  Hello World!
</div>

It only works for a single line of text though, because we set the line's height to the same height as the containing box element.


A more versatile approach

This is another way to align text vertically. This solution will work for a single line and multiple lines of text, but it still requires a fixed height container:

div {
  height: 200px;
  line-height: 200px;
  text-align: center;
  border: 2px dashed #f69c55;
}
span {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
}
<div>
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Haec et tu ita posuisti, et verba vestra sunt. Non enim iam stirpis bonum quaeret, sed animalis. </span>
</div>

The CSS just sizes the <div>, vertically center aligns the <span> by setting the <div>'s line-height equal to its height, and makes the <span> an inline-block with vertical-align: middle. Then it sets the line-height back to normal for the <span>, so its contents will flow naturally inside the block.


Simulating table display

And here is another option, which may not work on older browsers that don't support display: table and display: table-cell (basically just Internet Explorer 7). Using CSS we simulate table behavior (since tables support vertical alignment), and the HTML is the same as the second example:

div {
  display: table;
  height: 100px;
  width: 100%;
  text-align: center;
  border: 2px dashed #f69c55;
}
span {
  display: table-cell;
  vertical-align: middle;
}
<div>
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>


Using absolute positioning

This technique uses an absolutely positioned element setting top, bottom, left and right to 0. It is described in more detail in an article in Smashing Magazine, Absolute Horizontal And Vertical Centering In CSS.

@Rob 2012-01-14 22:01:15

Because it goes wrong if the div or text changes or more content is added.

@acSlater 2012-09-11 16:05:34

But this is what he said, if you know how much text you will use its perfectly acceptable... the solution below is however more flexible

@YMC 2013-07-30 22:28:56

Only 3rd approach works well on my Firefox 22.0, however it does not work for all browsers. First 2 approaches stop working properly once I change height size for the div

@Fedor 2013-08-01 11:46:25

How can I achieve same goal with div's height set to: "height: 100%;" ?

@Ian Campbell 2013-10-03 20:20:37

The table-cell technique is pretty cool, but the content is then resized to fit the parent container. Here's an awesome technique from CSS Tricks, using the pseudo-element before: css-tricks.com/centering-in-the-unknown . The content isn't resized this way, but it only works in IE8+.

@Ilan 2015-02-20 11:38:29

the line-height trick for single line is clever - just remember to subtract padding height + border height if you're in box-sizing:border-box

@mPrinC 2015-02-22 14:00:52

I would just like to stress that you can remove /* height: 100px; line-height: 100px; */ lines if you want to have non fixed-height div; FIDDLE: jsfiddle.net/mPrinC/o7xyxvmf/3

@evelynhathaway 2015-09-26 05:46:07

@Fedor use this: #box { height: 100vh; line-height: 100vh; }

@Ethan 2016-01-10 15:45:45

Try the absolutely positioning method or pseudo-element based method (css-tricks.com/centering-in-the-unknown), as they are found to work well. NOTE that they work well when the containing element is large. However, these doesn't do good job when the expected height of containing element is small say, within ~1.5x font size. That is why most of the buttons/labels you see are large compared to font-size.

@Steven 2016-02-18 18:06:52

for the basic approach with line height, remember the line-height needs to take the padding, margin, and boarder into account.

@Haoyu Chen 2016-09-22 04:50:56

But the A more versatile approach method is not vertical centered, no one find it?

@stack247 2016-10-14 15:54:30

I found table and table-cell approach works the best, works on IE9 and above, not IE8 though.

@Si8 2016-12-02 15:26:49

When I use table and table-cell, some extra spacing is removed from the surrounding... any idea?

@Gonzalo 2017-01-22 19:50:57

A more versatile approach works on Fiddle and snipet but not in a document, any clues why this happens?

@Pacerier 2017-09-28 00:01:28

But instead of setting line-height using pixels, how can you set it to 100% of width?

@EscapeNetscape 2019-02-04 14:23:57

css-vertical-center.com - there are some solutions with browser compatibility

@Manish Kumar 2016-04-27 11:45:20

A very simple & most powerful solution to vertically align center:

.outer-div {
  height: 200px;
  width: 200px;
  text-align: center;
  border: 1px solid #000;
}

.inner {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  color: red;
}
<div class="outer-div">
  <span class="inner">No data available</span>
</div>

@Haoyu Chen 2016-09-22 04:49:18

But this is not vertical center....

@Streching my competence 2017-04-20 22:26:23

It is if you change "top: 45%;" to "top:50%;". Just tried with one, two, three lines in a circle, and the center was aligned perfectly.

@Dave 2014-10-30 10:09:30

I needed a row of clickable elephants, vertically centered, but without using a table to get around some Internet Explorer 9 weirdness.

I eventually found the nicest CSS (for my needs) and it's great with Firefox, Chrome, and Internet Explorer 11. Sadly Internet Explorer 9 is still laughing at me...

div {
  border: 1px dotted blue;
  display: inline;
  line-height: 100px;
  height: 100px;
}

span {
  border: 1px solid red;
  display: inline-block;
  line-height: normal;
  vertical-align: middle;
}

.out {
  border: 3px solid silver;
  display: inline-block;
}
<div class="out" onclick="alert(1)">
  <div> <span><img src="http://www.birdfolk.co.uk/littleredsolo.png"/></span> </div>
  <div> <span>A lovely clickable option.</span> </div>
</div>

<div class="out" onclick="alert(2)">
  <div> <span><img src="http://www.birdfolk.co.uk/bang2/Ship01.png"/></span> </div>
  <div> <span>Something charming to click on.</span> </div>
</div>

Obviously you don't need the borders, but they can help you see how it works.

@Dabbler 2017-10-17 18:36:04

I love the "clickable elephants".

@antelove 2017-09-22 12:56:19

.box {  
  width: 100%;
  background: #000;
  font-size: 48px;
  color: #FFF;
  text-align: center;
}

.height {
  line-height: 170px;
  height: 170px;
}

.transform { 
  height: 170px;
  position: relative;
}

.transform p {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
<h4>Using Height</h4>
<div class="box height">
  Lorem ipsum dolor sit
</div>

<hr />

<h4>Using Transform</h4>
<div class="box transform">
  <p>Lorem ipsum dolor sit</p>
</div>

@Emile Bergeron 2017-11-23 19:06:02

Transform is already explained and height as well since a couple years already.

@bourax webmaster 2016-08-10 12:42:15

This works perfectly.

You have to use table style for the div and center align for the content.

@War10ck 2016-08-29 15:12:40

Please post the relevant code snippet in the question.

@Ayyappan K 2016-10-31 17:52:33

Wherever you want vertically center style means you can try display:table-cell and vertical-align:middle.

Example:

#box
{
  display: table-cell;
  vertical-align: middle;
  height: 90px;
  width: 270px;
  background: #000;
  font-size: 48px;
  font-style: oblique;
  color: #FFF;
  text-align: center;
  margin-top: 20px;
  margin-left: 5px;
}
<div Id="box">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>

@mPrinC 2015-02-22 13:59:26

I would just like to extend the answer from @michielvoo in order to release need for line-height and breathing of div height. It is basically just simplified version like this:

div {
  width: 250px;
  /* height: 100px;
  line-height: 100px; */
  text-align: center;
  border: 1px solid #123456;
  background-color: #bbbbff;
  padding: 10px;
  margin: 10px;
}

span {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
}
<div>
  <span>All grown-ups were once children... but only few of them remember it</span>
</div>

<div>
  <span>And now here is my secret, a very simple secret: It is only with the heart that one can see rightly; what is essential is invisible to the eye.</span>
</div>

NOTE: commented out part of cssis needed for fixed-height of enclosing div.

@user6781634 2016-09-05 05:39:51

.text{
   background:#ccc;  
   position:relative; 
   float:left; 
   text-align:center; 
   width:400px; 
   line-height:80px; 
   font-size:24px; 
   color:#000; 
   float:left;
 }

@Toby Speight 2016-10-20 16:33:32

Although this code may help to solve the problem, it doesn't explain why and/or how it answers the question. Providing this additional context would significantly improve its long-term educational value. Please edit your answer to add explanation, including what limitations and assumptions apply.

@sstauross 2016-09-27 13:40:08

Try the transform property:

 #box {
  height: 90px;
  width: 270px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
 <div Id="box">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>

@Ariful Islam 2012-01-14 21:29:54

You can easily do this by adding the following piece of CSS code:

display: table-cell;
vertical-align: middle;

That means your CSS finally looks like:

#box {
  height: 90px;
  width: 270px;
  background: #000;
  font-size: 48px;
  font-style: oblique;
  color: #FFF;
  text-align: center;
  margin-top: 20px;
  margin-left: 5px;
  display: table-cell;
  vertical-align: middle;
}
<div id="box">
  Some text
</div>

@Tim 2012-01-14 21:34:16

Looks like that kills the margin attributes, though.

@mrtsherman 2012-01-14 23:00:56

Note that this solution does not support IE7

@James McLaughlin 2013-05-11 18:32:49

@mrtsherman Or rather, IE7 does not support this solution. ;-)

@Ian Campbell 2014-01-04 20:03:11

@Costa -- You may have to float the parent div as well, if you are floating something inside of this div... check out stackoverflow.com/questions/2062258/…

@Jude Duran 2014-03-07 06:44:18

sadly, this does not support vertical scrolling..probably because of the display: table-cell..:(

@Penguin 2016-01-25 07:18:44

It disables min-heigth.

@Jürg 2014-08-28 10:11:14

Flexible approach

div {
  width: 250px;
  min-height: 50px;
  line-height: 50px;
  text-align: center;
  border: 1px solid #123456;
  margin-bottom:5px;
}
span {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
}
<div>
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br />
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br />
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>
<div>
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>
<div>
  <span>Lorem ipsum dolor sit amet.</span>
</div>
<div>

@bruceceng 2015-09-18 17:38:01

Newer browsers now support the CSS calc function. If you are targeting these browsers you may want to look into doing something like this:

<div style="position: relative; width: 400px; height: 400px; background-color: red">
  <span style="position: absolute; line-height: 40px; height: 80px; text-align: center; width: 300px; overflow: hidden; top: calc(50% - 40px); left: calc(50% - 150px);">
    Here are two lines that will be centered even if the parent div changes size.
  </span>
</div>

The key is to use style = "top: calc(50% - [innerFixedHeightInPX/2]px); height: [innerFixedHeightInPX]px;" inside an absolute or relatively positioned parent div.

@Sajid 2016-01-04 10:56:03

Here is working code:

body{
  margin:0;
}
div {
  height: 80px;
  background: #171717;
  font-size: 24px;
  text-align: center;
  font-style: normal;
  color: #FFF;
  margin-top: 18px;
  margin-left: 4px;
  line-height: 80px;
}
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Align text vertically center in div using CSS</title>
  </head>

  <body>
    <div>
      <span><a class="btn" href="http://ownanswers.com/"
               rel="dofollow">OwnAnswers.com</a>
      </span>
      For asking your questions, visit this site.
    </div>
  </body>
</html>

Result

Enter image description here

@Carles Alcolea 2016-08-27 23:10:41

I'm not sure anyone has gone the writing-mode route, but I think it solves the problem cleanly and has a broad support:

.vertical {
  //border: 1px solid green;
  writing-mode: vertical-lr;
  text-align: center;
  height: 100%;
  width: 100%;
}
.horizontal {
  //border: 1px solid blue;
  display: inline-block;
  writing-mode: horizontal-tb;
  width: 100%;
  text-align: center;
}
.content {
  text-align: left;
  display: inline-block;
  border: 1px solid #e0e0e0;
  padding: .5em 1em;
  border-radius: 1em;
}
<div class="vertical">
  <div class="horizontal">
    <div class="content">
      I'm centered in the vertical and horizontal thing
    </div>
  </div>
</div>

This will, of course, work with any dimensions you need (besides 100% of the parent). If you uncomment the border lines, it'll be helpful to familiarize yourself.

JSFiddle demo for you to fiddle.

Caniuse support: 85.22% + 6.26% = 91.48% (even IE is in!)

@BAR 2014-10-25 18:12:33

For reference and to add a simpler answer:

Pure CSS:

.vertical-align {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

Or as a SASS/SCSS Mixin:

@mixin vertical-align {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

Use by:

.class-to-center {
    @include vertical-align;
}

By Sebastian Ekström's blog post Vertical align anything with just 3 lines of CSS:

This method can cause elements to be blurry due to the element being placed on a “half pixel”. A solution for this is to set its parent element to preserve-3d. Like following:

.parent-element {
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

We live in 2015+ and Flex Box is supported by every major modern browser.

It will be the way websites are made from here on out.

Learn it!

@d4Rk 2016-01-21 15:04:49

Pure CSS: did the trick for me, but I somehow had to use absolute positioning..

@Vanessa King 2017-12-29 21:37:06

I had the same issue as @d4Rk. My (block) container had relative positioning, and height, and the item needing vertical centering (an image) had to be absolutely positioned. What a complicated/simple problem!! Here's hoping there's a simple/simple fix in the next version of CSS.

@Marconi 2015-12-01 18:06:57

Try this solution:

.EXTENDER {
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    width: 100%;
    height: 100%;
    overflow-y: hidden;
    overflow-x: hidden;
}

.PADDER-CENTER {
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}
<div class="EXTENDER">
  <div class="PADDER-CENTER">
    <div contentEditable="true">Edit this text...</div>
  </div>
</div>

Built using CSS+.

Related Questions

Sponsored Content

94 Answered Questions

[SOLVED] How to horizontally center a <div>?

41 Answered Questions

[SOLVED] How to vertically center a div for all browsers?

26 Answered Questions

[SOLVED] Is there a CSS parent selector?

  • 2009-06-18 19:59:36
  • jcuenod
  • 1590930 View
  • 2717 Score
  • 26 Answer
  • Tags:   css css-selectors

19 Answered Questions

[SOLVED] Is it possible to apply CSS to half of a character?

28 Answered Questions

[SOLVED] How do I give text or an image a transparent background using CSS?

  • 2009-04-30 09:00:02
  • Stijn Sanders
  • 1499019 View
  • 2092 Score
  • 28 Answer
  • Tags:   html css opacity

40 Answered Questions

[SOLVED] How to disable text selection highlighting?

33 Answered Questions

[SOLVED] Change an HTML5 input's placeholder color with CSS

27 Answered Questions

[SOLVED] How do I vertically align text in a div?

20 Answered Questions

[SOLVED] Vertically align text next to an image?

26 Answered Questions

[SOLVED] Set cellpadding and cellspacing in CSS?

Sponsored Content