通过上篇css 的规律摸索之路（一）css之三角形的规律及变化，我们已经知道css三角形是怎么回事，现在我们来看看另外一个，常见的应用：css之居中问题（垂直居中与水平居中）
垂直居中
单行文本垂直居中
首先，说说最简单的常见居中方式-单行文本垂直居中：
<div class="single_line_text_box">
<div class="single_line_text">单行文本垂直居中</div>
<!-- <img src="" alt="" class="single_line_text"> -->
</div>
<style>
.single_line_text_box {
height: 100px; width: 100%; background: #333; line-height: 100px; text-align: center;
}
.single_line_text {
vertical-align: middle; position: relative;
}
</style>
这方式很简单，我们常用来做单行文本的垂直居中，它的用处也只限与垂直居中包含文本的容器和图片，并且宽高不能设定不然无法居中。
说明：通过父容器设定line-height，以及子元素设定vertical-align: middle;来实现，其中子元素垂直居中不能设定宽度和高度,子元素的内容必须为文本或图片,且文字尽量不能换行不然会溢出
display:table的方式
下来就是display:table的方式，这是一种借助表格样式的居中方式：
<div class="table_parent">
<div class="table_child">说明：通过父容器设定display: table;，以及子元素设定display: table-cell; vertical-align: middle;来实现，其中子元素设定的高度宽度无效，子元素的内容任意,内容为文字时自动换行照样居中</div>
</div><br>
<div class="table_parent">
<div class="table_child"><div class="table_child_content">display:table的方式</div></div>
</div>
<style>
.table_parent {
display: table; height: 100px; width: 100%; background: #eee; text-align: center;
}
.table_child {
display: table-cell; vertical-align: middle;
}
.table_child_content {
height: 20px; width: 500px; background: #aaa; display: inline-block;
}
</style>
这种方式的垂直居中效果如图：
说明：这种方式通过父容器设定display: table;，以及子元素设定display: table-cell; vertical-align: middle;来实现，其中子元素设定的高度宽度无效，子元素的内容任意,内容为文字时自动换行照样居中
绝对定位居中
绝对定位居中的方式，这是一种借助绝对定位和外边距的居中方式：
<div class="absolute_locating_parent">
<div class="absolute_locating_child">绝对定位居中</div>
</div>
<style>
.absolute_locating_parent {
height: 100px; width: 100%; position: relative; background: #eee;
}
.absolute_locating_child {
margin: auto; position: absolute; width: 100px; height: 50px; background: #aaa;
top: 0; left: 0; bottom: 0; right: 0;
}
</style>
这种方式的垂直居中效果如图：
说明：通过父容器设定position: relative;，子元素设定margin: auto; position: absolute;top: 0; left: 0; bottom: 0; right: 0;来实现，其中子元素必须固定宽高，子元素的内容任意。其中绝对定位居中支持跨浏览器，包括IE8-IE10，不论是否设置padding都可居中（在不使用box-sizing属性的前提下），完美支持图片居中。但是.必须声明高度以及设置overflow:auto来防止内容越界溢出，在Windows Phone设备上不起作用。
弹性盒居中对齐
通过弹性盒来实现居中对齐，本人推荐的居中方式，但是注意兼容性。
<div class="elastic_box_centering">
<div class="iconloader">
<!-- <div class="iconloader_child"></div> -->
Loader...
</div>
</div>
<style>
.elastic_box_centering {
display: flex;
align-items: center; /*定义元素垂直居中*/
justify-content: center; /*定义容器里的元素水平居中*/
width: 100%; height: 300px;
background: #eee;
}
.iconloader {
background: #aaa;
}
/*.iconloader_child {
width: 50px; height: 50px;
}*/
</style>
这种方式的垂直居中效果如图：
说明：通过弹性魔盒来实现居中，这种方式特别优雅只需要给父元素添加就可以，不论你子元素是什么样子都居中
绝对定位和负margin
通过padding等份自填充来实现居中对齐的假象，除非特殊环境不然尽量不要使用这种居中方式。
div class="absolute_locating_margin">
<div class="absolute_locating_margin_child">绝对定位和负margin</div>
</div>
<style>
.absolute_locating_margin {
height: 100px; width: 100%; background: #eee; position: relative;
}
.absolute_locating_margin_child {
position: absolute; top: 50%; left: 50%;
height: 50px; width: 180px; margin: -25px 0 0 -90px;
background: #999;
}
</style>
这种方式的垂直居中效果如图：
说明：这种方式是通过定位然后利用margin弥补定位来实现的居中，其子元素的宽度和高度必须固定
padding居中假象
通过padding等份自填充来实现居中对齐的假象，除非特殊环境不然尽量不要使用这种居中方式。
<div class="padding_center">
<div class="padding_center_child">padding居中</div>
</div>
<style>
.padding_center {
padding: 5% 0; width: 100%; background: #eee;
}
.padding_center_child {
text-align: center; background: #999; color: #fff; padding: 10% 0;
}
</style>
这种方式的垂直居中效果如图：
说明：这种方式是通过padding填充来实现的假象，其父元素和子元素的高度是未知，由浏览器自由定义
到此垂直居中基本赘述完毕，其实还有几种但是个人觉得有些无脑加胡闹
水平居中
text-align内容居中
我们常用这种方式来进行居中，对于需要居中的都得是行内元素或内联块元素。
<div class="center">
<div class="center_child">内容居中</div>
</div>
<style>
.center {
height: 500px; width: 100%; background: #eee; text-align: center;
}
.center_child {
display: inline-block; width: 70px; height: 70px; background: #999;
}
</style>
margin: 0 auto;
对于这个大家一定很熟悉，很常用。
<div class="margin_center">
<div class="margin_center_child">内容居中</div>
</div>
<style>
.margin_center {
height: 500px; width: 100%; background: #eee;
}
.margin_center_child {
width: 70px; height: 70px; background: #999; margin: 0 auto;
}
</style>
说明：margin: 0 auto;这种居中方式特别适合宽和高固定的，但是不知道宽的他就解决不了了，于是下面的孕育而生
table+margin
对于这个大家就不一定很熟悉，其实很简单，给子元素加上display: table;这句话就可以了
<div class="table_margin_center">
<div class="table_margin_center_child">table_margin_center居中</div>
</div>
<style>
.table_margin_center {
height: 500px; width: 100%; background: #eee;
}
.table_margin_center_child {
background: #999; display: table; margin: 0 auto;
}
</style>
小结
到此常见的居中方式就完毕了，我们可以对与两个进行配合应用。
提示：后面还有精彩敬请期待，请大家关注我的CSDN博文：侬姝沁儿，或者我的简书专题：web前端。如有意见可以进行评论，每一条评论我都会认真对待。
