读书笔记《编写高质量代码》-CSS居中

一、概况

CSS居中分为水平居中和竖直居中，不同的情况相应的方法也各不相同，因此首先必须知道自己是属于哪种情况，下面先看详细分类，知道属于哪种情况才能对症下药：

水平居中分为三类：

• 行内元素水平居中
• 确定宽度的块级元素水平居中
• 不确定宽度的块级元素的水平居中

竖直居中也分为三类：

• 父元素高度不确定的文本、图片、块级元素的竖直居中
• 父元素高度确定的单行文本的竖直居中
• 父元素高度确定的多行文本、图片、块级元素的竖直居中

二、水平居中

情况一：行内元素水平居中

对于span、img等行内元素水平居中非常简单，一个属性搞定: text-align:center;

.div1{
width: 1000px;
height: 1000px;
background-color: red;
text-align: center;//水平居中
}
span{
color: #fff;
display: block;
}

<div class="div1">
	<span>span要水平居中</span>
	<img src="../img/img.jpg" alt="">
</div>

情况二：确定宽度的块级元素水平居中

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

.div2{
	width: 200px;
	height: 200px;
	background-color: yellow;
	margin-right: auto;/*块级元素*/
	margin-left: auto;
}

<div class="div1">
	<div class="div2">div要居中</div>
</div>

情况二：不确定宽度的块级元素水平居中

方法一：使用table来帮助实现

ul标签是整个分页模块的根元素，它包含的li数量不确定，所以ul本身的宽度也没有办法确定，不能通过设置固定宽度（margin-left:auto和margin-right：auto）来实现居中。使用table标签可以实现不确定宽度的块级元素的水平居中，table有趣的地方在于它本身并不是块级元素，如果不给它设定宽度，它的宽度由内部元素的宽度撑起，可以设置table的margin-left:auto和margin-right：auto实现水平居中：

.wrap{background-color: #000;width: 500px;height: 1000px;}
ul{list-style: none;margin: 0;padding: 0;}
table{margin-left: auto;margin-right: auto;}
.test li{float: left;display: inline;margin-right: 5px;}
.test a{float: left;width: 20px;height: 20px;text-align: center;line-height: 20px;background-color: #316AC5;color: #fff;border: 1px solid #316ac5}

<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>
			</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>
</div>

实现效果:

方法一的缺点：增加了无语义的标签，加深了标签的嵌套层数。

方法二：改变块级元素display为inline

方法二可以改变块级元素display:inline，然后设置父元素的text-align:center，当成行内元素：

.test2{text-align: center;padding:5px;}
.test2 li{display: inline;}
		
<div class="wrap">
<ul class="test2">
<li><a href="#">1</a></li>
</ul>
<ul class="test2">
<li> <a href="">1</a> </li>
<li><a href="">2</a> </li>
</ul>
<ul class="test2">
<li> <a href="">1</a> </li>
<li><a href="">2</a> </li>
<li><a href="">3</a> </li>
</ul>
</div>

效果如方法一，方法二的好处是不用增加无语义标签，缺点是将块级元素修改为行内元素，导致失去了块级元素的一些效果，如设置长宽值等。

方法三：使用position:relative

最后以一种方法，给父元素设置float，父元素设置position:relative和left:50%，子元素设置position:relative和left:50%来实现水平居中：

.test3{clear: both;padding-top: 5px;float: left;position: relative;left: 50%;}
.test3 li{float: left;display: inline;margin-right: 5px;position: relative;left: -50%;}
.test3 a{float: left;width: 20px;height: 20px;text-align: center;line-height: 20px;background-color: #316AC5;color: #fff;border: 1px solid #316ac5}

<div class="wrap">
		<ul class="test3">
			<li><a href="#">1</a></li>
		</ul>
		<ul class="test3">
			<li> <a href="">1</a> </li>
			<li><a href="">2</a> </li>
		</ul>
		<ul class="test3">
			<li> <a href="">1</a> </li>
			<li><a href="">2</a> </li>
			<li><a href="">3</a> </li>
		</ul>
	</div>

效果如方法一，方法三保留块级元素，且没有添加无语义标签，缺点是设置了position:relative，带来了一定的副作用。

二、竖直居中

父元素高度不确定的文本、图片、块级元素的竖直居中

通过给父容器设置相同上下边距来实现。自动把父元素的高度竖直撑开。

padding-top: 20px;
padding-bottom: 20px;

父元素高度确定的单行文本的竖直居中

通过给父元素设置line-height来实现，line-height值和父元素高度值子相同。

父元素高度确定的多行文本、图片、块级元素的竖直居中

方法一：vertical-align

CSS中有一个用于竖直居中的属性：vertical-align，但只有当父元素为td或者th时，属性才能生效，对于其他块级元素例如div默认情况下是不支持的。直接使用表格，缺点是带来了无语义标签。

方法二：使用display:table-cell

用display:table-cell和vertical-align:middle来实现居中。

display: table-cell;
vertical-align: middle;

缺点不支持IE6和IE7