如果被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置text-align:center来实现
满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的
不定宽的块状元素居中有三种方法来实现。
方法一：
第一步：为需要设置居中的元素外面加入table标签（包括tbody，tr，td）
第二步：为table设置“左右margin居中
html代码
<div>
<table>
<tbody>
<tr><td>
<ul>
<li><a>1</a></li>
<li><a>2</a></li>
<li><a>3</a></li>
</ul>
</td></tr>
</tbody>
</table>
</div>
css代码
<style>
table{margin:0 auto;}
ul{list-style:none;margin:0;padding:0;}
li{float:left;display:inline;margin-right:8px;}
</style>
方法二：
第一步：改变块级元素的display为inline类型，然后使用text-align:center来居中
html代码
<body>
<div class="container">
<ul>
<li><a>1</a></li>
<li><a>2</a></li>
<li><a>3</a></li>
</ul>
</div>
</body>
css代码
<style>.container{text-align:center}
.container ul{list-display:none; margin:0; padding:0; display:inline;}
.container li{margin-right:8px; display:inline;}
</style>
这种方法相比第一种方法的优势是不用增加无语义标签，简化了标签的嵌套深度，但也存在着一些问题：它将块状元素的 display 类型改为 inline，变成了行内元素，所以少了一些功能，比如设定长度值。
方法三：给父元素设置float，然后给父元素postion:relative和left:50%,自元素设置position:relative和left:-50%来实现水平居中
html代码
<body> <div class="container"> <ul> <li><a>1</a></li> <li><a>2</a></li> <li><a>3</a></li> </ul> </div> </body>
css代码
<style>
.container{float:left; position:relative; left:50%;}
.container ul{list-display:none;margin:0;padding:0;position:relative;left:-50%;}
</style>
这种方法可以保留块状元素仍以 display:block 的形式显示，优点不添加无语议表标签，不增加嵌套深度，但它的缺点是设置了 position:relative，带来了一定的副作用。
网友评论