How to vertically center my container div

Question

I am able to center my elements horizontally, but not vertically. I found couple of questions on stackoverflow regarding the same issue but the suggestions in those didn't work for some reason. Any suggestions? This is what I am going for: http://i62.tinypic.com/n4gzcw.png

Here is what I have so far:

    <style>

.container {
    width: 100%;
    height: 100%;
    background-color: red;

    position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

.datetime {
    width: 50%;
    margin-left: auto; 
    margin-right: auto;
    margin-top: 15%;
    background-color: white;
    text-align: center;
}

.main {
    width: 100%;
    margin-left: auto; 
    margin-right: auto;
    margin-top: 3%;
    background-color: yellow;
    text-align: center;
}

.left {
    width: 25%;
    float: left;
}

.left img {
    width: 50%;
    height: 50%;
    max-width: 80px;
    max-height: 80px;
}

.mid {
    width: 50%;
    text-align: center;
    float: left;
    padding-top: 5%;
    font-size: 1em;
}

.right {
    width: 25%;
    float: left;
}

.right img {
    width: 50%;
    height: 50%;
    max-width: 80px;
    max-height: 80px;
}

.stadium {
    width: 50%;
    margin-left: auto; 
    margin-right: auto;
    background-color: white;
    text-align: center;    
}
</style>


<div class="container">
    <div class="datetime">26 August 2014<br />12:00pm</div>
    <div class="main">
        <div class="left"><img src="http://dejaniskra.comze.com/ManchesterUnitedUpcomingFixture/logos/mkdons.png" /></div>
        <div class="mid">MK Dons vs Manchester United</div>
        <div class="right"><img src="http://dejaniskra.comze.com/ManchesterUnitedUpcomingFixture/logos/manchesterunited.png" /></div>
    </div>
    <div class="stadium">Stadium:mk - Milton Keynes</div>
</div>

score 1 · Accepted Answer · answered Aug 25 '14 at 17:58

1

You can wrap your content with .container-inner and add styles:

.container-inner{
    height: 150px;
    position: absolute;
    top: 50%;
    margin-top: -75px;
    width: 100%;
}

you can find the working example here:

http://jsfiddle.net/Lkfdxm13/

answered Aug 25 '14 at 17:58

Slawa Eremin

5,264
18
28

score 0 · Answer 2 · edited May 23 '17 at 11:51

Creating a partial CSS layout and then attempting to adapt it to another strategy can be fraught with problems. My suggestion would be to create a clean set of html wrappers with only background colours and work on employing one of the solutions that you've found, for example How to verticaly align into the center of the content of a div with defined width/height?. Once you have a working layout then you can move your content in.
If you come across a problem that you can't solve then you can post a specific CSS question and the answers will probably be a lot more forthcoming.

How to vertically center my container div

2 Answers2