0

I am creating a site in bootstrap, and I want to know how to vertically center two child divs inside of a parent div. I know this is probably pretty simple, but I have tried everything and it will not work. 

(http://codepen.io/cjhill02/pen/VLPERd)
Siguza
  • 21,155
  • 6
  • 52
  • 89
CJ Hill
  • 521
  • 1
  • 4
  • 8
  • possible duplicate of [Horizontally center a div in a div](http://stackoverflow.com/questions/114543/horizontally-center-a-div-in-a-div) – Daniel Compton Jun 01 '15 at 03:09
  • @DanielCompton I am sorry, I should have specified. I want to vertically align the child divs inside of their parent. – CJ Hill Jun 01 '15 at 03:10
  • Vertical centering in 2015 still is an **incredible pain the ass**. – connexo Jun 01 '15 at 03:16
  • @connexo It really is!! – CJ Hill Jun 01 '15 at 03:19
  • 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) – Adam Link Jun 01 '15 at 03:24
  • Here are two simple methods to center a div within a div, vertically, horizontally or both (pure CSS): http://stackoverflow.com/a/31977476/3597276 – Michael Benjamin Aug 19 '15 at 21:04

3 Answers3

0

try margin:auto

* {
  border: 1px solid #ddd;
}

section {
  padding: 100px 0;
  margin: auto
}
.col-md-6{
  margin: auto
}

for IE9 and IE10 put display:table to parent div and set attribute vallign="middle";display:table-cell to child element

vallign is a basic property supperted by old browsers as well as some new browsers

Akhilesh Kumar
  • 9,085
  • 13
  • 57
  • 95
0

You can always do it with display: flex;

JS Fiddle

.container {
    display:flex;
    width:100%;
    align-items: center;
    justify-content: center;
    height: 400px;
  border: 4px solid black;
}
.container div {
    display:flex;
    align-items: center;
    justify-content: center;
}

.container > div {
    width: 40%;
    background-color: red;
    height: 221.5433px;
}

.container > div + div {
    width: 40%;
    background-color: brown;
    height: 278.8431px;
}

    
<div class="container">
    <div>centered</div>
    <div>centered</div>
</div>
Aramil Rey
  • 3,387
  • 1
  • 19
  • 30
  • Ok great! I was thinking about using display: flex, but I wasn't sure if that was the best way to go about doing it. Thanks – CJ Hill Jun 01 '15 at 03:21
  • It doesnt have support for IE8 and below, but still, responsive web design and most modern techniques doesn't have support neither – Aramil Rey Jun 01 '15 at 03:23
0

Do we know the height of the parent div? if so you can do like here

.row {
    justify-content: center;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

Please see here for result.

Jonathon
  • 552
  • 1
  • 9
  • 14