转载的：http://www.voidcn.com/article/p-wmdxyijd-bpm.html
一、行内元素水平居中
方法：如果被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置 text-align:center 来实现的。
如下：
<body> <div class="center"><span>行内元素在父容器中水平居中显示。</span></div> </body> <style> div{ border:1px solid ; margin:20px; } .center{ text-align:center; } </style>
二、块状元素水平居中
当被设置元素为块状元素时，text-align:center 就不起作用了，此时分两种情况：定宽块状元素和不定宽块状元素。
1、定宽块状元素（块状元素的宽度width为固定值）
方法：满足定宽和块状两个条件的元素可以通过设置“左右margin”值为“auto”来实现居中
如下：
<body> <div>定宽块状元素水平居中。</div> </body> <style> div{ border:1px solid red; margin:20px auto; width:200px;/*宽度为固定值，不能写百分比*/ } </style>
2、块状不定宽元素
方法：
①设置 margin:0 auto; display:table;
②设置display:inline方法。改变块级元素的display为inline类型（设置为行内元素显示），然后使用text-align:center来实现居中效果
③设置position:relative;left:50%，利用相对定位的方式，将元素向左偏移50%。通过给父元素设置float，然后给父元素设置position:relative和left:50%，子元素设置position:relative和left:-50%来实现水平居中
方法①如下：
<div class="wrap"> 不定宽块状元素水平居中 </div> .wrap{ background:#ccc; margin:0 auto; display:table; }
方法②如下：
<body> <div class="container"> <ul> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> </ul> </div> </body> <style> .container{text-align:center;} .container ul{list-style:none;margin:0;padding:0;display:inline;} .container li{margin-right:8px;display:inline;} </style>
方法③如下：
<div class="wrap"> <div class="wrap-center">不定宽块状元素水平居中。</div> </div> .wrap-center{ background:#ccc; position:relative; left:-50%; } .wrap{ float:left; position:relative; left:50%; }
原文：https://www.cnblogs.com/shouyaya/p/12046113.html