sajisweetgirl 0 Posted June 28, 2013 Report 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 Quote Link to post Share on other sites
Ingolme 1,035 Posted June 28, 2013 Report 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;} Quote Link to post Share on other sites
sajisweetgirl 0 Posted July 3, 2013 Author Report Share Posted July 3, 2013 In the first way , if i had a div with auto height , what should I do? Quote Link to post Share on other sites
Ingolme 1,035 Posted July 3, 2013 Report 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. Quote Link to post Share on other sites
dsonesuk 929 Posted July 3, 2013 Report 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. Quote Link to post Share on other sites
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.