Vertically center child container

Question

I am having a parent and child container, where I need to align the child container to middle(both horizontal and vertical).

HTML:

<section class="travelPlace">
    <div>
    </div>
</section>

CSS:

.travelPlace {
    width: 50%;
    height: 100%;
    float: left;
}
.travelPlace > div {
    width: 53.4375%;
    margin: 0 auto;
    background: url('../images/globe.png') center no-repeat;
    height: 344px;
    background-size: contain;
}

did u tried to add `vertical-align:middle;` to `.travelPlace`? — UnskilledFreak, Nov 12 '14 at 13:17
I recommend using `background-color` in order to see how the div occupate the space in your document ;-). — Anwar, Nov 12 '14 at 13:28
possible duplicate of [vertical alignment of elements in a div](http://stackoverflow.com/questions/79461/vertical-alignment-of-elements-in-a-div) — Luigi, Nov 12 '14 at 13:37

score 0 · Answer 1 · answered Nov 12 '14 at 13:26

.travelPlace {width: 100px; height: 250px; position:relative;background:black;}
.travelPlace > div {position: absolute;
right: 0;
top: 0;
bottom: 0;
margin: auto;
color: #fff;
background: red;
height: 19px;
text-align: center;
display: block;
width: 100%;}

Hope it was helpful.Rajesh

score 0 · Answer 2 · answered Nov 12 '14 at 13:31

Maybe you can do something wih this code, I made the background yellow and the content red to make it easier to see.

.travelPlace {width: 50%; height: 800px; background: yellow;}
.travelPlace > .something {width: 53.4375%; background: red; height: 344px; margin-top: -172px;}
.travelPlace > .somepusher{
  display: inline-block;
  height: 50%;
  width: 100%;
}

<div class="travelPlace">
  <div class="somepusher"></div>
    <div class="something">           
    </div>
</div>

Basicly what I did: Add a new div which is 50% the height of the main Div, then add a negative margin to the top of your inner div which is 50% the height of the inner div (172px)

score 0 · Answer 3 · answered Nov 12 '14 at 13:36

You could use display:table-cell for your parent item and display: inline-block to your child item. Here is a snippet...

.travelPlace {
  display: table-cell;
  width: 50%;
  height: 100%;
  vertical-align: middle;
  text-align: center;
  background: black;
  padding: 50px 0px 50px 0px;
}
.place {
  display: inline-block;
  width: 300px;
  height: 300px;
  text-align: left;
  background: #CCC;
}

<section class="travelPlace">
  <div class="place">
  </div>
</section>

Vertically center child container

3 Answers3