CSS 水平垂直居中全套方案

CSS 水平垂直居中

通过css让元素水平垂直居中有两个形式：

1. 居中元素固定宽高：
   absoulte + 负margin
   absolute + margin: auto
   absolute + calc

2. 居中元素不固定宽高
   absolute + transform
   table布局
   css table
   lineHeight
   flex
   grid

以下是html代码：

<div class="wrap">
	<div class="box size"></div>
</div>

公共的css代码样式：(其中的size类是固定宽度才有的class)

.wrap {
	width: 400px;
	height: 400px;
	border: 1px solid #000;
}
.box {
	background: yellow;
}
.size {
	width: 100px;
	height: 100px;
}

居中元素固定宽高

1. absolute + 负margin

绝对定位的百分比是相当于父元素的宽高，通过这个特性可以让元素居中，但绝对定义是居于子元素的左上角，而我们期望的是子元素水平垂直居中，那可以再借助负margin，负margin可以让元素往反的方向拉回，通过指定子元素的外边距为子元素宽高的一半负值，就可以让子元素水平垂直居中
css样式：

/*  引入上面的.wrap 和.size公共样式 */
.wrap {
	position: relative;
}
.box {
	position: absolute;
	left: 50%;
	top: 50%;
	margin-left: -50px;
	margin-top: -50px;
}

这种居中方式比较常用，理解起来简单，兼容性也不错，只不过要指定居中元素的宽高才行

2. absolute + margin: auto

/*  引入上面的.wrap 和.size公共样式 */
.wrap {
	position: relative;
}
.box {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom:0;
	margin: 0 auto
}

这种居中方式兼容性不错，只不过要指定居中元素的宽高才行

3. absolute + calc

通过css提供的calc计算属性，直接将定位的距离减去子元素宽高的一半就可以

/*  引入上面的.wrap 和.size公共样式 */
.wrap {
	position: relative;
}
.box {
	position: absolute;
	left: calc(50% - 50px);
	top: calc(50% - 50px);
}

这种居中方式更加简单，但是要依赖于calc的兼容性，且得指定元素的宽高

居中元素不固定宽高

1. absolute + transform

通过css新增的transform里的translate属性，translate属性是相对于自身的宽高，利用这特性，让元素往反的方向拉回自身宽度的一半就可以实现水平垂直居中

/*  引入上面的.wrap公共样式 */
.wrap {
	position: relative;
}
.box {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}

这种居中方式要依赖于tranform的兼容性

2. table

table虽然可以实现水平垂直居中，但会增加冗余代码。利用table单元格中的内容天然就是垂直局中的特性，然后再加上text-align:center属性实现水平居中

<table>
	<tbody>
		<tr>
			<td class="wrap">
				<div class="box"></div>
			</td>
		</tr>
	</tbody>
</table>

/*  引入上面的.wrap公共样式 */
.wrap {
	text-align: 'center';
}
.box {
	display: inline-block;
}

这种方式代码冗余，且也不是table的正确用法

3. css table

css新增的table，可以把普通元素，变为table元素的效果，通过这个特性也可以实现水平垂直居中

/*  引入上面的.wrap公共样式 */
.wrap {
	display: tabel-cell;
	text-align: 'center';
	vertical-align: 'middle';
}
.box {
	display: inline-block;
}

4. lineHeight

利用行内元素水平居中的特性，然后结合vertical-align: middle垂直居中，可以实现水平垂直居中
/* 引入上面的.wrap公共样式 */

.wrap {
	line-height: 400px;
	font-size: 0;
	text-align: 'center';
}
.box {
	display: inline-block;
	font-size: 16px;
	line-height: initial;
	vertical-align: 'middle';
	text-align: 'left'; /* 修正字体方向 */
}

5. flex

flex为现在比较流行的布局方案，可以轻松实现水平垂直居中

/*  引入上面的.wrap公共样式 */
.wrap {
	display: flex;
	justify-conent: 'center';
	align-items: 'center';
}

在移动端可以完全使用flex布局，但pc端根据业务需要看兼容性情况

6. grid

grid是新出的网格布局，也可以实现水平垂直居中

/*  引入上面的.wrap公共样式 */
.wrap {
	display: grid;
}
.box {
	justify-self: center;
	align-self: center;
}

参考文章：CSS实现水平垂直居中的1010种方式（史上最全）