How to make this inner div vertically centered? (Using CSS)

Question

There are two divs. I want the inner div to be vertically centered, without giving margins, as I want height of inner div to be auto, because its content can change and height can increase.

Here are the two divs:

Outer div:

    .frontleft{
    width: 602px;
    height: 450px;
    float: left;
    margin: 35px auto;
    z-index: 10;
}

Inner div:

.c1{
height: auto;
width: inherit;
}

Thanks.

possible duplicate: http://stackoverflow.com/questions/114543/horizontally-center-a-div-in-a-div — Fritz, Aug 20 '15 at 03:20
No, it's not working. I just tried. It centers horizontally only. — , Aug 20 '15 at 03:26
ow. Sorry my bad. how about this? (http://stackoverflow.com/questions/6490252/vertically-centering-a-div-inside-another-div) — Fritz, Aug 20 '15 at 03:32
what browser are you using for testing? i think the attribute float:left is what's messing up the intended effect. can you try removing that? And then try and use the .cn{display: table-cell; width: 500px; height: 500px; vertical-align: middle; text-align: center} for the outer class — Fritz, Aug 20 '15 at 03:41
Three valid answers for a broken paradigm: vertical centering elements with CSS — Francisco Presencia, Aug 20 '15 at 04:25
possible duplicate of [How to vertically center a div for all browsers?](http://stackoverflow.com/questions/396145/how-to-vertically-center-a-div-for-all-browsers) — Francisco Presencia, Aug 20 '15 at 04:25

lnewt · Answer 1 · 2015-08-20T03:58:22.710

1

Why don't you use a table instead? With vertical-align in td tag.

      <html>
      <body>
      <table class="frontleft">
      <tr><td>I am a sentence</td></tr>
      </table>
      </body>
      </html>

edited Aug 20 '15 at 03:58

answered Aug 20 '15 at 03:50

lnewt

31
6

score 1 · Answer 2 · answered Aug 20 '15 at 04:15

You should position inner element absolute and use transform property for vertical centering.

.frontleft {
  width: 602px;
  height: 450px;
  float: left;
  margin: 35px auto;
  z-index: 10;
  position: relative;
  background: orange;
}
.c1 {
  height: auto;
  width: inherit;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: blue;
}

<div class="frontleft">
  <div class="c1">test</div>
</div>

m4n0 · Accepted Answer · 2015-08-20T04:31:06.823

1

You can use Flexbox. display: flex on parent and align-self: center on the child item will center it vertically.

.frontleft {
  width: 602px;
  height: 450px;
  float: left;
  margin: 35px auto;
  z-index: 10;
  background: #2C2955;
  display: flex;
}
.c1 {
  height: auto;
  width: inherit;
  background: #4C5FB1;
  align-self: center;
}

<div class="frontleft">
  <div class="c1">Center</div>
</div>

edited Aug 20 '15 at 04:31

answered Aug 20 '15 at 04:22

m4n0

29,823
27
76
89

Great! I tried using table it worked. And now I tried your method and it works great even without using table. But please explain how does it work. What means flex and align-self? – Aug 20 '15 at 04:28
I have updated the link. Flexbox is a modern solution for flexible layout which would be used from/in 2015. Sadly it doesn't support <=IE9. http://caniuse.com/#search=flexbox – m4n0 Aug 20 '15 at 04:31

How to make this inner div vertically centered? (Using CSS)

3 Answers3