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

@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

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

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

@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 four 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 four edges.

Setting auto as the margin on all four 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 Internet Explorer 7 and below, and like the previous method the content inside the child div can grow too large, causing it to be hidden.

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

Flexboxes that were introduced in CSS 3 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 is 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;

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.

@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.

@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 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 Internet Explorer is in!)

@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 a 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.

@Eseirt 2014-09-28 18:07:30

Another way:

Don't set the height attribute of the div, but instead use padding: to achieve the effect. Similarly to line-height, it only works if you have one line of text. Although this way, if you have more content, the text will still be centered, but the div itself will be slightly larger.

So instead of going with:

div {
  height: 120px;
  line-height: 120px;
}

You can say:

div {
   padding: 60px 0; // Maybe 60 minus font-size divided by two, if you want to be exact
}

This will set the top and bottom padding of the div to 60px, and the left and right padding to zero, making the div 120 pixels (plus the height of your font) high, and placing the text vertically centered in the div.

@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>

@bortunac 2014-03-07 13:13:36

The simple and versatile way is (as Michielvoo's table approach):

[ctrv]{
    display:table !important;
}

[ctrv] > *{ /* adressing direct discendents */
      display: table-cell;
      vertical-align: middle;
      // text-align: center; /* optional */
}

Using this attribute (or a equivalent class) on a parent tag works even for many children to align:

<parent ctrv>  <ch1/>  <ch2/>   </parent>

@user 2014-02-01 20:48:35

For a single line of text (or a single character) you can use this technique:

It can be used when #box has a non-fixed, relative height in %.

<div id="box"></div>

#box::before {
    display: block;
    content: "";
    height: 50%;
}

#box::after {
    vertical-align: top;
    line-height: 0;
    content: "TextContent";
}

See a live demo at JsBin (easier to edit CSS) or JsFiddle (easier to change height of result frame).

If you want to place inner text in HTML, not in CSS, then you need to wrap text content in additional inline element and edit #box::after to match it. (And, of course, content: property should be removed.)

For example, <div id="box"><span>TextContent</span></div>. In this case, #box::after should be replaced with #box span.

For Internet Explorer 8 support you must replace :: with :.

@Lucio Mollinedo 2016-06-03 18:33:44

Out of all of the methods described here, yours was the only one that did the magic. My case: a div that had a span element with a spinning clock icon using css (for a loading layer). I just removed "TextContent" (leaving the property as an empty string) for #box::after and that was it.

@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

@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.

@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

@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!

@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.

@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>

@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?

@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.

@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>

@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.

@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.

@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.

Related Questions

Sponsored Content

100 Answered Questions

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

34 Answered Questions

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

31 Answered Questions

[SOLVED] Is there a CSS parent selector?

  • 2009-06-18 19:59:36
  • jcuenod
  • 1717856 View
  • 2866 Score
  • 31 Answer
  • Tags:   css css-selectors

44 Answered Questions

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

28 Answered Questions

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

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
  • 1506984 View
  • 2157 Score
  • 28 Answer
  • Tags:   html css opacity

40 Answered Questions

[SOLVED] How to disable text selection highlighting?

26 Answered Questions

[SOLVED] Set cellpadding and cellspacing in CSS?

19 Answered Questions

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

20 Answered Questions

[SOLVED] Vertically align text next to an image?

Sponsored Content