1.行內元素：這個比較簡單，一般使用text-align：center就可。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style type="text/css">
#div1{
text-align:center;
background-color:#ddd;
border: 1px solid red;
}
</style>
<body>
<div id="div1">
行內居中
</div>
</body>
</html>
2.塊級元素。
- 如果是定寬的那很簡單，用margin：0 auto;就可以。其實就是把左右外邊距設置爲自動，而上下外邊距隨意。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style type="text/css">
#div1{
width:200px;
margin:0 auto;
border:1px solid red;
}
</style>
<body>
<div id="div1">
塊居中11111111
</div>
</body>
</html>- 如果是不定寬的，有幾種方法。
（1）將元素用table標籤框起來。注意要有tr td ,然後用margin。。。（這是因爲table的一個寬度自適應性）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style type="text/css">
table{
margin:0 auto;
}
#div1{
border: 1px solid red;
}
</style>
<body>
<table>
<tr><td>
<div id="div1">
塊居中1111
</div>
</td></tr>
</table>
</body>
</html>（2）和第一種類似，將元素設置爲display:table ,然後用margin。。。。
不過要注意的是它不兼容ie8以下的版本
#div1{
border: 1px solid red;
display: table;
margin:0 auto;
}（3）用display:inline ，然後在外面框一個元素，設置text-align：center
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style type="text/css">
#div0{
text-align: center;
}
#div1{
display: inline;
border:1px solid red;
}
</style>
<body>
<div id="div0">
<div id="div1">
塊居中111
</div>
</div>
</body>
</html>（4）用position去定位。可以在父元素設置 position:relative;float:left;left:50%，然後給子元素設置position:relative;left:-50%。這個很好理解，如果父元素left：50%，那麼父元素的開始會距離左邊50%的距離（相對原來），然後把子元素向左移動父元素一半距離（這裏也就相當於移動自身50%的距離），那麼相對原來就是居中了！
~(≧▽≦)/~
嘛，這裏要注意的是要設置浮動。如果不設置浮動，那麼它的寬度就是原來默認的寬度（一般就是屏幕的內容長度–不定）；而設置浮動之後，如果不設置寬度，那麼它會儘可能的窄（也就是適應內容的寬度了），就會在後來達到類似定寬的效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style type="text/css">
#div0{
float: left;/*重要*/
position: relative;
left:50%;
border:1px solid yellow;
}
#div1{
position:relative;
left:-50%;
border:1px solid red;
}
</style>
<body>
<div id="div0">
<div id="div1">
塊居中11111111111111111111111111111
</div>
</div>
</body>
</html>6.26補充，用css3的transform的translate屬性也可以實現水平垂直居中，它需要與position合用。
例如：
.wrapper {
padding: 20px;
background:orange;
color:#fff;
position:absolute;
top:50%;
left:50%;
border-radius: 5px;
-webkit-transform:translate(-50%,-50%);
-moz-transform:translate(-50%);
transform:translate(-50%);
}