Matej Posted May 11, 2016 Share Posted 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? Link to comment Share on other sites More sharing options...
Ingolme Posted May 11, 2016 Share Posted 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. Link to comment Share on other sites More sharing options...
Matej Posted May 11, 2016 Author Share Posted 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... Link to comment Share on other sites More sharing options...
Ingolme Posted May 11, 2016 Share Posted 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. Link to comment Share on other sites More sharing options...
Matej Posted May 11, 2016 Author Share Posted 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 Link to comment Share on other sites More sharing options...
Ingolme Posted May 11, 2016 Share Posted 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. Link to comment Share on other sites More sharing options...
dsonesuk Posted May 11, 2016 Share Posted 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; Link to comment Share on other sites More sharing options...
Matej Posted May 11, 2016 Author Share Posted 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 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now