CSS 水平居中

一、水平居中：

①：文本、文本等行内元素的水平居中：给父元素设置text-align:center可以实现文本、图片等行内元素的水平居中：

<style type="text/css">
.test { text-align: center;}
</style>

<div class="test">I am test!</div>

②：确定宽度的块级元素的水平居中：确定宽度的块级元素水平居中通过设置margin-left:auto和margin-right:auto来实现：

<style type="text/css">
.test { width: 400px; height: 100px; border: 1px solid #000;}
.test1 { background: red; width: 200px; margin-left: auto; margin-right: auto;}
</style>

<div class="test"><div class="test1">I am test1</div></div>

③：不确定宽度的块级元素的水平居中：有三种方案

方案一：用到table标签，table标签本身不是块级元素，如果不给它设定宽度的话，它的宽度由内部元素的宽度“撑起”，但即使不设定它的宽度，仅设置margin-left:auto和margin-right:auto就可以实现table水平居中，间接使元素居中（缺点：增加了无语义标签，加深了标签的嵌套层数）：

<style type="text/css">
ul { list-style: none; margin: 0; padding: 0;}
table { margin-left: auto; margin-right: auto;}
.test li { float: left; display: inline; margin-right: 5px;}
</style>

<div class="wrap">
	<table>
		<tbody>
			<tr>
				<td>
					<ul class="test">
						<li><a href="">1</a></li>
					</ul>
				</td>
			</tr>
		</tbody>
	</table>
	<table>
		<tbody>
			<tr>
				<td>
					<ul class="test">
						<li><a href="">1</a></li>
						<li><a href="">2</a></li>
						<li><a href="">3</a></li>
					</ul>
				</td>
			</tr>
		</tbody>
	</table>
	<table>
		<tbody>
			<tr>
				<td>
					<ul class="test">
						<li><a href="">1</a></li>
						<li><a href="">2</a></li>
						<li><a href="">3</a></li>
						<li><a href="">4</a></li>
						<li><a href="">5</a></li>
					</ul>
				</td>
			</tr>
		</tbody>
	</table>
</div>

方案二：将块级元素的display设置为inline类型，然后使用text-align:center来实现居中（缺点：元素变为行内元素，相比块级元素缺少一些功能，比如设置高度，宽度）

<style type="text/css">
ul { list-style: none; margin: 0; padding: 0;}
.test { text-align: center; padding: 5px;}
.test li {display: inline;}
</style>

<div class="wrap">
	<ul class="test">
		<li><a href="">1</a></li>
	</ul>
	<ul class="test">
		<li><a href="">1</a></li>
		<li><a href="">1</a></li>
		<li><a href="">1</a></li>
	</ul>
	<ul class="test">
		<li><a href="">1</a></li>
		<li><a href="">1</a></li>
		<li><a href="">1</a></li>
		<li><a href="">1</a></li>
		<li><a href="">1</a></li>
	</ul>
</div>

方案三：通过给父元素设置float，然后父元素设置position:relative和left：50%，子元素设置position:relative和left:-50%来实现水平居中。此方案可以保留块级元素仍以display:block的形式，而且不会添加无语义标签，但缺点是设置了position:relative，带来了一定的副作用：

<style type="text/css">
ul { list-style: none; margin: 0; padding: 0;}
.wrap { background: #000; width: 500px; height: 100px;}
.test { clear: both; float: left; position: relative; left: 50%;}
.test li { float: left; display: inline; position: relative; left: -50%;}
</style>

<div class="wrap">
	<ul class="test">
		<li><a href="">1</a></li>
	</ul>
	<ul class="test">
		<li><a href="">1</a></li>
		<li><a href="">1</a></li>
		<li><a href="">1</a></li>
	</ul>
	<ul class="test">
		<li><a href="">1</a></li>
		<li><a href="">1</a></li>
		<li><a href="">1</a></li>
		<li><a href="">1</a></li>
		<li><a href="">1</a></li>
	</ul>
</div>