在css网页布局中，我们会用到很多div块，在这些div块中的内容，我们会用居中的方式让其进行水平或垂直居中，那么有哪些居中的方式呢？
（1）使用margin：0 auto；实现水平居中； <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .dv1{ width: 1280px; height: 300px; background-color: orange; } .dv2{ margin: 0 auto; width: 200px; height: 100px; background-color: orangered; } </style> </head> <body> <div class="dv1"> <div class="dv2">居中测试</div> </div> </body> </html>
（2）使用text-align: center;实现对内容的水平居中； <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .dv1{ width: 1280px; height: 300px; background-color: orange; } .dv2{ width: 200px; height: 100px; margin: 0 auto; background-color: orangered; } .dv1>div{ text-align: center; } </style> </head> <body> <div class="dv1"> <div class="dv2">居中测试</div> </div> </body> </html> （3）使用position:absolute,设置left、top、margin-left、margin-top的属性
.one{ position:absolute; width:200px; height:200px; top:50%; left:50%; margin-top:-100px; margin-left:-100px; background:red; }
（4）使用position:fixed,同样设置left、top、margin-left、margin-top的属性
.two{ position:fixed; width:180px; height:180px; top:50%; left:50%; margin-top:-90px; margin-left:-90px; background:orange; }
（5）利用position:fixed属性， .three{ position:fixed; width:160px; height:160px; top:0; right:0; bottom:0; left:0; margin:auto; background:pink; }
（6）利用position:absolute属性，设置top/bottom/right/left .four{ position:absolute; width:140px; height:140px; top:0; right:0; bottom:0; left:0; margin:auto; background:black; }
（7）利用display:table-cell属性使内容垂直居中
.five{ display:table-cell; vertical-align:middle; text-align:center; width:120px; height:120px; background:purple; }
（8）最简单的一种使行内元素居中的方法，使用line-height属性
.six{ width:100px; height:100px; line-height:100px; text-align:center; background:gray; } （9）使用css3的display:-webkit-box属性，再设置-webkit-box-pack:center/-webkit-box-align:center
.seven{ width:90px; height:90px; display:-webkit-box; -webkit-box-pack:center; -webkit-box-align:center; background:yellow; color:black; }
（10）使用css3的新属性transform:translate(x,y)属性
.eight{ position:absolute; width:80px; height:80px; top:50%; left:50%; transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); -moz-transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%); background:green; }
居中对齐方式比较多，不过使用比较频繁的是前面的几种。