網頁製作之CSS的垂直置中實現

來源:互聯網
上載者:User
css|網頁 若BOX的寬度和高度已知:
<!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>
<title></title>
<style type="text/css">
body{
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
margin: 0;
padding: 0;/*--for opera--*/
}

#layout{
position: absolute;/*--絕對位置--*/
top: 50%;
left: 50%;
margin-top: -240px;/*--div高度的一半--*/
margin-left: -320px;/*--div寬度的一半--*/
width: 640px;
height: 480px;
background: #ECECEC;
}

pre{
padding: 15px;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>

<body>
<div id="layout"><pre> body{
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
margin: 0;
padding: 0;/*--for opera--*/
}

#layout{
position: absolute;/*--絕對位置--*/
top: 50%;
left: 50%;
margin-top: -240px;/*--div高度的一半--*/
margin-left: -320px;/*--div寬度的一半--*/
width: 640px;
height: 480px;
background: #ECECEC;
}

pre{
padding: 15px;
}
</pre></div>
</body>
</html>

解釋:如果把螢幕中點設為座標原點(0 0),X的正方向是螢幕的右邊,Y的正方向螢幕的上邊。那麼在已知BOX寬度和高度的情況下,設BOX的屬性為絕對位置,top:50% left:50%,這樣的話,BOX的左上方就在座標原點(0 0), 設margin-left:-320px(寬度的一半), 左上方的座標(-320 0),再設margin-top:-240px(高度的一半),左上方的座標現在是(-320 240),相對原點來說, BOX是完全置中了,四個頂點的值分比別是(320 240)Ⅰ, (-320 240)Ⅱ,(-320 -240)Ⅲ ,(320 -240)Ⅳ。

適用於首頁帶語言選擇版本或者歡迎頁面。

單行文字可採用行高來實現垂直置中,或者用padding來調整。

相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。