Align vertically center of the div

Question

I have the following code:

body {
  height: 100%;
}
section {
  height: 70%;
}
.first {
  height: 10%;
}
.second {
  height: 10%;
}
.third {
  height: 10%;
}

<section class="main-container">
  <div class="first">
    content goes here
  </div>
  <div class="second">
    content goes here
  </div>
  <div class="third">
    content goes here
  </div>
</section>

I need the content of first, second and third classes should be vertically aligned center.

Possible duplicate of [Vertically align text in a div](http://stackoverflow.com/questions/2939914/vertically-align-text-in-a-div) — Lee, Jan 24 '17 at 09:51

score 1 · Answer 1 · answered Jan 24 '17 at 10:03

If you want to using css3 flexbox, you can do like this:

.main-container {
    height:calc(100vh);
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-content: center;
    -ms-flex-line-pack: center;
    align-content: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

.first,
.second,
.third {
  flex: 0 1 auto;
}

<section class="main-container">
  <div class="first">
    content goes here
  </div>
  <div class="second">
    content goes here
  </div>
  <div class="third">
    content goes here
  </div>
</section>

score 0 · Answer 2 · answered Jan 24 '17 at 09:59

0

Adding the below CSS will bring the text to vertically middle of divs

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

For better result you can give below style to outer div.

display:table;

answered Jan 24 '17 at 09:59

Anjana Shyamlal

408
5
11

You should set a snippet or a fiddle to demonstrate this ( even works in IE8) :) – G-Cyrillus Jan 24 '17 at 10:13

score 0 · Answer 3 · answered Jan 24 '17 at 10:07

The easiest is to use flex .

You should mind that height: xx%; requires a known height value on parent to be calculated. Here body{height:100%} is 100% of nothing (so for the children) since html has no height set.

html,
body,
section{
  height: 100%;/* section inherits height value from body which inherits it from html */
  margin: 0;
}

section,
.first,
.second,
.third {
  margin:0;
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
  width:100%;
}
section {
}
.first {
  height: 10%;
}
.second {

  flex: 1;
  background:gray
}
.third {
  height: 10%;
}

<body>
  <section class="main-container">
    <div class="first">
      // content goes here
    </div>
    <div class="second">
      // content goes here
    </div>
    <div class="third">
      // content goes here
    </div>
  </section>
</body>

or did you mean center site content in the middle which flex does easily too (same CSS rules but no flex imbrication needed here ):

html,
body,
section{
  height: 100%;
  margin: 0;
}

section
{
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
  width:100%;
  background:gray
}
section {
}
.first {
  height: 10%;
}
.second {
  height: 10%;
  background:lightgray
}
.third {
  height: 10%;
}

<body>
  <section class="main-container">
    <div class="first">
      // content goes here
    </div>
    <div class="second">
      // content goes here
    </div>
    <div class="third">
      // content goes here
    </div>
  </section>
</body>

score 0 · Accepted Answer · answered Jan 24 '17 at 10:42

Using Flex

body,html {
  height: 100%;
}
section {
  height: 70%;
  display:flex;
  align-items: center;
  justify-content: center;
  
}
.first {
  height: 10%;
  background:green;
}
.second {
  height: 10%;
  background:blue;
}
.third {
  height: 10%;
  background:orange;
}

<section class="main-container">
  <div class="first">
    content goes here
  </div>
  <div class="second">
    content goes here
  </div>
  <div class="third">
    content goes here
  </div>
</section

score -1 · Answer 5 · answered Jan 24 '17 at 10:04

-1

Check This out

INLINE CSS

<div class="section" style="text-align:center">...</div>

PURE CSS

.section {
    text-align:center;
}

answered Jan 24 '17 at 10:04

Feelsbadman

1,163
4
17
37

1

I understood he was looking for vertical centering, not horizontal :) – G-Cyrillus Jan 24 '17 at 10:12
yyyep, realized that now – Feelsbadman Jan 24 '17 at 12:26

Align vertically center of the div

5 Answers5

Check This out

INLINE CSS

PURE CSS