水平垂直居中的几种方式

本文介绍的方法种类不太全，因为笔者只想分享用过的、通用性高并且简便易用的。

 第一类：基于 flex 场景

HTML代码：

	<div class="box blue">
			<div id="mainer" class="yellow element mainer"></div>
	</div>

CSS代码：

.blue{
    background-color: blue;
}
.yellow{
	background-color: yellow;
}
.element{
	height: 200px;
	width: 200px;
}
.mainer{
}
/*
 * 使用 flex 中 水平轴 和 相对轴 居中的布局方式实现子文件的水平与垂直居中。
 */
.box{
	height: 600px;
	width: 600px;
	display: flex;
	justify-content: center;
	align-items: center;
}

效果图如下： 

方便易用，具体实现逻辑可以看我的另一篇文章，介绍小程序包括 flex 布局的。

第二类： relative 的精准测量

HTML代码如下：

<div class="box blue">
			<div id="mainer" class="yellow element mainer"></div>
		</div>

CSS代码如下：

.blue{
	background-color: blue;
}
.yellow{
	background-color: yellow;
}
.element{
	height: 200px;
	width: 200px;
}
/*
 * 关键点： 父元素使用 relative + 子元素 absolute 完成基本定位布局、
 *  + left，top 将子元素移动到居中偏右下的位置，此时子元素位置处于（600/2+200/2,600/2+200/2)，也就是父元素+子元素宽高再除以二的位置。
 *  + transform: translate(-50%,-50%) 将子元素向左向上偏移（200/2,200/2）的距离，到达整个父容器的中点。（初学者会用即可）
 * 此方法适用于 子元素宽高未知的情况下。笔者推崇。
 */
.mainer{
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
}
.box{
	height: 600px;
	width: 600px;
	position: relative;
}

关键点： 父元素使用 relative + 子元素 absolute 完成基本定位布局、
+ left，top 将子元素移动到居中偏右下的位置，此时子元素位置处于（600/2+200/2,600/2+200/2)，也就是父元素+子元素宽高再除以二的位置。
+ transform: translate(-50%,-50%) 将子元素向左向上偏移（200/2,200/2）的距离，到达整个父容器的中点。（初学者会用即可）
此方法适用于 子元素宽高未知的情况下。笔者推崇。

第三种：基于 vertical-align 属性的永久居中

HTML代码如下：

<div class="container">
    <div class="dialog"></div>
</div>

CSS代码如下：

.container {
    position: fixed;    
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0,0,0,.5);
    text-align: center;
    white-space: nowrap;
    overflow: auto;
}
.container:after {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
.dialog {
    display: inline-block;
    vertical-align: middle;
    font-size: 14px;
    white-space:normal

这个方法是张鑫旭大神写的，值得一看。