网页垂直居中的写法
網頁設計中居中的格式定義非常地常見，現在我就把我在工作中遇到的種種居中的情況做個小小的整理，這里主要講的是垂直居中
一、最簡單的，水平居中
XML/HTML 代碼復制內容到剪貼板
只要定義margin:0 auto和層寬就可以了。不過有個前提，這種代碼是xhtml中的寫法，所以文件頭一定要定義
比較一下
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<style>
*{margin:0; padding:0}
.a{ margin:0 auto; width:400px;border:1px solid #F00;}
</style>
</head>
<body>
<div class="a">aaaaaaaaaa</div>
</body>
</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>無標題文檔</title>
<style>
*{margin:0; padding:0}
.a{ margin:0 auto; width:400px;border:1px solid #F00;}
</style>
</head>
<body>
<div class="a">aaaaaaaaaa</div>
</body>
</html>
二、高度和寬度都固定，且只有一行文字，將line-height和height定義成相等
< br />
<!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>無標題文檔</title>
<style>
*{margin:0; padding:0}
.wrapper{ margin:10px auto auto; width:400px; height:40px;border:1px solid #F00; text-align:center; line-height:40px}
</style>
</head>
<body>
<div class="wrapper">aaaaaaaaaa</div>
</body>
</html>
三，層的高度自適應，將padding-top和 padding-bottom高成等值
<!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>無標題文檔</title>
<style>
*{margin:0; padding:0}
.wrapper{ margin:10px auto auto; width:400px;border:1px solid #F00; text-align:center; padding-top:40px; padding-bottom:40px}
</style>
</head>
<body>
<div class="wrapper">aaaaaaaaaa<br />aaaaaaaaaa<br />aaaaaaaaaa<br />aaaaaaaaaa<br />aaaaaaaaaa<br /></div>
</body>
</html>
?
四、層的長和寬固定（這種情況多用于針對body的垂直顯水平居中）
將position設成absolute; left:50%; top:50%; margin-left和margin-top向左和向上縮進一半
<!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>無標題文檔</title>
<style>
*{margin:0; padding:0}
.wrapper{ width:400px; height:200px;border:1px solid #F00; text-align:center;position:absolute; left:50%; top:50%; margin-left:-200px; margin-top:-100px}
</style>
</head>
<body>
<div class="wrapper"></div>
</body>
</html>
居中的情況很多種，我們在日常開發時經常遇到層的高度固定，要使里面的多行li內容垂直居中。上面的方式由于使用到了絕對定位，很多情況下我們都是通過目測的方式，將padding-top設置大概的距離，來達到所謂的“垂直居中”
?
轉載于:https://www.cnblogs.com/haozime/archive/2010/01/19/2639159.html
總結
- 上一篇： Oracle索引失效问题
- 下一篇： IromPython .Net 的简介和