sajisweetgirl Posted June 28, 2013 Share Posted June 28, 2013 Hi how can I set the position of the background div in center vertically , same space between top and bottom . in this example. http://w3schools.com/css/tryit.asp?filename=trycss_transparency i tried margin-top:auto; margin-bottom:auto; but it didn't work! thanks Link to comment Share on other sites More sharing options...
Ingolme Posted June 28, 2013 Share Posted June 28, 2013 There are two ways to center something vertically. The first one is to set the position to "absolute", set the top property to 50%, set the left property to 50% and then give a negative left margin of half the width of the box and a negative top margin of half the height of the box. This method requires the box to have a set width and height. Example: .box { width: 500px; height: 400px; position: absolute; left: 50%; top: 50%; ; margin-top: -200px;} The second example might not work in older versions of Internet Explorer, I might be remembering it incorrectly. Display the parent of the box as a table cell and set its vertical-align to middle. .parent { display: table-cell; height: 100%; vertical-align: middle;} Link to comment Share on other sites More sharing options...
sajisweetgirl Posted July 3, 2013 Author Share Posted July 3, 2013 In the first way , if i had a div with auto height , what should I do? Link to comment Share on other sites More sharing options...
Ingolme Posted July 3, 2013 Share Posted July 3, 2013 The first method doesn't allow for that. The second method should work, if I've remembered it properly A third method would involve Javascript measuring the element and setting its position accordingly. Link to comment Share on other sites More sharing options...
dsonesuk Posted July 3, 2013 Share Posted July 3, 2013 You need to give the parent (body,html) of .parent 100% height, as the body/html wil be the height of content NOT the viewport. 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