legohalflife2man Posted July 19, 2009 Share Posted July 19, 2009 I have a DIV that I would like centered in the exact middle of the page. I have it centered horizontally, but now I need to center it vertically, as well. Here is my CSS for the entire page: body { background: #000000; margin: auto; } .splash { background: url("/images/coming_soon.jpg") 0 0 no-repeat; width: 910px; height: 361px; margin: auto; } The page only contains this DIV that I want to center. How could I accomplish the vertical alignment of this DIV? Thank you in advance for your help. Quote Link to comment Share on other sites More sharing options...
peachsnapple Posted July 20, 2009 Share Posted July 20, 2009 Hi Lego, I had to tested out your scenerio with one of my images on my pc the way you wanted it. Do ou know how to do a floating div tag? Because that is how is what I use to have what you want. I will place the code here and give it a try. It worked for me <style type="text/css"> <!-- body { background: #000000; margin: auto; } #splash { position:absolute; left:359px; top:255px; width:910px; height:361px; z-index:1; margin:auto; background:url(file:///C|/wamp/www/Hair_Business_Website/WeftHair/HairColorChart.jpg); } --> </style></head> <body> <div id="splash"></div> </body> </html> I did not make a style sheet for it. I pretty much did it on one page to test it, but you can copy and paste the style code onto your style sheet buy copying and pasting the codes between the arrows. Quote Link to comment Share on other sites More sharing options...
jayjay960 Posted July 20, 2009 Share Posted July 20, 2009 The above won't actually center the image properly. If you were to resize the wondow it would stay in the same position, not snap to the center. Unfortunately this is the one thing I've never been able to work out how to do. The only way would be to create a table (using display: table; display: table-row; etc. Not the actual html <table>) of three columns and three rows and place what you want centered in the middle one. Quote Link to comment Share on other sites More sharing options...
haku Posted July 21, 2009 Share Posted July 21, 2009 Unfortunately, as of now in CSS2, this isn't possible with any ease. I believe the Film God hacked something together a while back that used display:table-cell for all browsers, then something else for IE. Quote Link to comment Share on other sites More sharing options...
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.