Hello I just want to know how to center vertical div ? I found 1 article here but I don't understand this http://www.jakpsatweb.cz/css/css-vertical-center-solution.html MY HTML: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Document</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="container"> <h1>Lorem Ipsum</h1> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p> </div> </body> </html> Code (markup): CSS /* CSS Document */ * { margin: 0; padding: 0; } body { background-color: #999; } p { color: #FFF; } #container { margin: auto; width: 300px; } Code (markup): Just tell what I need to insert into #container Current look:
You don't understand what? Read the article and do as it says. Your current code is nowhere near to the one in the example.
I already find solution Here's the code #wrapper { left: 50%; margin: -125px 0 0 -200px; -webkit-perspective: 2500; position: absolute; top: 50%; } Code (markup):
Negative margins are fair enough if you don't mind making the margin calculation each time and inserting it into the styling. A low maintenance way to vertically centre an element of no defined height is to use display:table and display:table-cell, for CSS2.1-compliant browsers. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Vertically Center a Block Container (CSS2.1-compliant browsers)</title> <style type="text/css"> * { margin: 0; padding: 0; } html, body { height:100%; width:100%; } body { background-color: #999; } p { color: #FFF; } #wrap1 { height:100%; width:300px; margin-left: auto; margin-right: auto; text-align: center; display:table; vertical-align:middle; } #wrap2 { display:table-cell; vertical-align:middle; } </style> </head> <body> <div id="wrap1"> <div id="wrap2"> <h1>Lorem Ipsum</h1> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p> </div> </div> </body> </html> Code (markup): Then if required, make additions to cater for IE6 & IE7 which do not support display:table and display:table-cell. See the solution for that at http://pmob.co.uk/pob/hoz-vert-center.htm for block-level containers. The solution at jakpsatweb.cz does not work properly for IE6 or IE7.