CSS centering DIV contains other DIVs

Question

How can I horizontally center a div within a div using CSS? i am trying and i get the it centered from left and right but i cant get it centered from top and bottom.

        html {
        height:100%;
    }
    body {
        padding:0px;
        margin: 0px;
        height:100%;
    }
    #openFrame {
        position:fixed;
        top:0px;
        width:100%;
        left:0%;
        height:100%;
    }
    .main {
        position: absolute;
        width: 80%;
        max-height: 100%;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
    }
    #vid {
        width:100%;
        max-height:100%;
        vertical-align: middle;
    }
    #bottom {
        width:100%;
        height:69px;
        background-color: green;
        background-repeat: no-repeat;
        background-position: top center;
        background-size: contain;
    }

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) — Kevin Boucher, Jun 22 '15 at 21:25

score 0 · Answer 1 · answered Jun 22 '15 at 21:29

Centering a DIV vertically is a bit tricky. Basically you have to set it's position to absolute and the position of the container to relative. Then you set the top and left values to 50% and substract half the width / height of the element to be centered by applying a negative margin.

Codepen example

<!DOCTYPE html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <style type="text/css">
        body, html, #container {
            height: 100%;
            width: 100%;
        }
        #container {
            position: relative;
        }
        #content {
            width: 300px;
            height: 300px;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -150px;
            margin-left: -150px;
            background-color: red;
        }
        </style>
    </head>
    <body>
        <div id="container">
            <div id="content"></div>
        </div>
    </body>
</html>

Maybe say why? This way nobody will be able to help you. I checked your jsfiddle and there are many problems. Plus it doesn't look like you tried the solution. Please try the solution and create a jsfiddle and then post it, this way I can check what is wrong. Another thing: When you do absolute positioning, it doesn't make sense to assign 0px to both top and bottom. That means it is 0px from top AND 0px from bottom which is impossible. See more here: http://www.w3schools.com/css/css_positioning.asp — Ole Spaarmann, Jun 23 '15 at 11:09
You have to do some work. This is a site where questions are answered, not where other people write code for you. — Ole Spaarmann, Jun 23 '15 at 12:06
thanks for the Advice Mr , i didn't ask you to do my work. And at the end i got it working Not using your example. P.S dont check the jdfiddle because i didn't update it. Thanks — Blair, Jun 24 '15 at 16:24

CSS centering DIV contains other DIVs

1 Answers1