Jump to content

Center div horizontally and vertically


Matej
 Share

Recommended Posts

If the parent has position relative, absolute or fixed then the following technique will work for any element inside it:

.my-element {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

If you wish to support older versions of Internet Explorer the solution is more complicated.

Link to comment
Share on other sites

Using this when i have a multiple elements in centered DIV and i set positive value to a margin on any of them results in others elements recieve the same margin but negative. e.g

<div class="info">
<h1>TeXT GoeSt here</h1>
<p>bla bla bla bla bla bla</p>
<button class="myButton">Leave a Button</button>
</div>
.info{
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translateX(-50%) translateY(-50%);
}
.info h1{
position: relative;
font-family: Roboto Bold;
font-size: 90px;
margin-top: -130px;
}

this is fine cuz there is a negative value but

.info .myButton{
      position: relative;
     border: none;
     color: white;
     text-decoration: none;
    width: 200px;
    height: 50px;
    background: #FF0505;
    outline: none;
    cursor: pointer;
    margin-top: 200px;
}

does not just move the element. it moves all others elements the oposite way...

Link to comment
Share on other sites

If you give the parent container .info an explicit width then it will not be manipulated by the position of the elements inside it. By moving the button you're making the container wider, which causes everything in it to shift.

Link to comment
Share on other sites

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" id="viewport" content="target-densitydpi=high-dpi,initial-scale=1.0,user-scalable=no" />
        <title>Document Title</title>
        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <script  type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
        <script type="text/javascript">

        </script>
        <style type="text/css">

            body,html {height: 100%; padding:0; margin:0;}
            .info{
                display: inline-block;
                /* position: absolute;
                 top: 50%;
                 left: 50%;
                 transform: translateX(-50%) translateY(-50%);*/
                vertical-align:middle;


            }


            .info h1{
                /*   position: relative;*/
                font-family: Roboto Bold;
                font-size: 90px;
                /*  margin-top: -130px;*/
            }
            .info .myButton{
                /*  position: relative;*/
                border: none;
                color: white;
                text-decoration: none;
                width: 200px;
                height: 50px;
                background: #FF0505;
                outline: none;
                cursor: pointer;
                /* margin-top: 200px;*/
            }

            .C_VM_outer {height: 100%; overflow: hidden; text-align: center;}
            .C_VM_outer:after, .C_VM_outer:before {content: ""; height: 100%; display: inline-block; vertical-align:middle; width: 1px; background-color: red;}
        </style>
    </head>
    <body>
        <div class="C_VM_outer">
            <div class="info">
                <h1>TeXT GoeSt here</h1>
                <p>bla bla bla bla bla bla</p>
                <button class="myButton">Leave a Button</button>
            </div>
        </div>
    </body>
</html>

You can lose one of the :before :after and remove width with background color as its only for show;

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...