Center div horizontally and vertically

Matej · May 11, 2016

What is the trick to center div horizontally and vertically at the same time? I have this demo and need to center the div with the text in the middle of its parent div. How can i do such a thing?

Ingolme · May 11, 2016

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.

Matej · May 11, 2016

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...

Ingolme · May 11, 2016

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.

Matej · May 11, 2016

The parent container of .info ineed has explicit ( 100% width ) , i set the width of .info to certain value also but the behavior is the same

Ingolme · May 11, 2016

I meant to give .info a width. It does not have a specific width, so its width changes based on what content is inside it.

dsonesuk · May 11, 2016

<!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;

Matej · May 11, 2016

I meant to give .info a width. It does not have a specific width, so its width changes based on what content is inside it.

as i mentioned, i tried to add width to .info and it still behaves the same

Sign In

Center div horizontally and vertically

Recommended Posts

Matej

Link to comment

Share on other sites

Ingolme

Link to comment

Share on other sites

Matej

Link to comment

Share on other sites

Ingolme

Link to comment

Share on other sites

Matej

Link to comment

Share on other sites

Ingolme

Link to comment

Share on other sites

dsonesuk

Link to comment

Share on other sites

Matej

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity