CSS 中的各种居中 (水平、垂直)

导读：

CSS 的居中有水平居中和垂直居中,这两种居中又分为行内元素居中和块级元素居中。根据父、子元素的高度是否清楚，又会使得不同的居中用不同方法。本文就其中一些情况做下简单说明，以作笔记之用，仅供大家参考。

1、文本居中

先上示例中的结构：

<!-- html 结构 -->
<div class="parent">
	<span class="child">some text</span>
</div>
<!-- 以便查看效果添加如下样式 -->
.parent {
	border: 1px solid #000;
}
.child {
}

1-1、水平居中

文本在元素内居中对齐，可以使用 text-align: center;。因为 text-align 属性是会被继承的，所以写在父元素或者子元素上都可以实现居中，这里我们对父元素进行设置：

.parent {
	text-align: center;
}

some text

1-2、垂直居中

1-2-1、文本在元素内垂直对齐，可以使用设置 line-height 的值为包含元素的高度，所以这里我们需要设置父元素的高度。line-height 属性同样会被继承，这里我们对子元素进行设置：

.parent {
	height: 60px;
}
.child {
	line-height: 60px;
}

some text

1-2-2、也可以对父元素使用 padding 进行居中，：

.parent {
	padding: 30px 0;
}

some text

1-3、水平垂直居中

1-3-1、如果要水平和垂直都居中，可以使用 line-height 和 text-align: center;。

.parent {
	text-align: center;
	height: 60px;
	line-height: 60px;
}

some text

1-3-2、也可以使用 padding 和 text-align: center;。

.parent {
	text-align: center;
	padding: 30px 0;
}

some text

自然直接使用 padding: 30px;也可以实现水平垂直居中。

2、块元素居中

同样先上示例中的结构：

<!-- html 结构 -->
<div class="parent">
	<div class="child"></div>
</div>
<!-- 以便查看效果添加如下样式 -->
<!-- 如果实例中没有指明需要知道父、子元素的高度或宽度则对应方法对此不作要求 -->
.parent {
	height: 80px;
	border: 1px solid #000;
}
.child {
	height: 40px;
	width: 80%;
	background-color:#c0c0c0;
}

2-1、水平居中

2-1-1、要水平居中对齐一个元素(如 <div>), 可以使用 margin: auto;。

.child {
	margin: 0 auto;
	width:80%;
}

 

注意：该方法必须设置子元素的 width 属性(且不能为100%)。

2-1-2、在父元素中设置 text-align: center;，子元素中设置 display: inline-block;*zoom:1;。

.parent {
	text-align: center;
}
.child {
	display: inline-block;
	*zoom:1; /* 兼容 IE6、7 */
}

 

2-1-3、在子元素中设置 display:table;margin: 0 auto;。

.child {
	display: inline-block;
	*zoom:1; /* 兼容 IE6、7 */
}

 

2-1-4、absolute 配合 transform。

.parent {
	position: relative;
}
.child {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
}

 

2-1-5、强大的 flex 布局中的 justify-content: center;。

.parent {
	display: flex;
	justify-content: center;
}

 

2-2垂直居中

2-2-1、对父元素设置 display: table-cell;vertical-align:middle;。

.parent {
	display: table-cell;
	width:100px; /* 对table-cell元素设置百分比（如100%）的宽高值时无效的,所以我们需要这样设置 */
	/* 但是可以将父元素设置display:table，再将父元素设置百分比宽高 */
	/* 子元素table-cell会自动撑满父元素。这就可以做相对于整个页面的水平垂直居中 */
	/* 此处为不破坏文章结构，实例采用并非上面展示的 width:100px; 而是第二种方法 */
	vertical-align:middle;
}

 

2-2-2、absolute 配合 transform。

.parent {
	position: relative;
}
.child {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}

 

2-2-3、强大的 flex 布局中的 align-items: center;。

.parent {
	display: flex;
	align-items: center;
}

 

2-3、完美居中(水平+垂直)

2-3-1、absolute 配合 transform。

.parent {
	position: relative;
}
.child {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}

 

2-3-2、强大的 flex布局。

.parent {
	display: flex;
	justify-content: center;
	align-items: center;
}

 

写在最后

实现居中的方法还有许多，根据不同的情况也会有不同的处理方式，本文只是简单的记录了其中一些，且涉及到一些兼容性并没有提及，学习需谨慎，若是文中有什么错误，欢迎指正。