持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第5天，点击查看活动详情
水平居中布局
含义：指当前元素在父级元素容器中，水平方向是居中显示的；
文本 / 行内元素 / 行内块级元素
原理：text-align 只 控制行内内容（文字、行内元素、行内块级元素）如何相对他的块父元素对齐。
<!--定义父级元素-->
<div id="parent">
<!--定义子级元素-->
<div id="child">水 平居中布局</div>
</div>
通过以下 CSS 样式代码实现水平居中
#parent{ text-align: center; }
优点
简单快捷，容易理解，兼容性非常好；
缺点
只对行内内容有效：属性会继承影响到后代行内内容；如果子元素宽度大于父元素宽度则无效，只有后代行内内容中宽度小于设置 text-align 属性的元素宽度的时候，才会水平居中；
单个块级元素
原理：在 margin 有节余的同时如果左右 margin 设置了 auto，将会均分剩余空间。另外，如果上下 的 margin 设置了 auto，其计算值为 0;
<!-- 定义父级元素-->
实现效果图:
<div id="parent" >
<!--定义子级元素-->
<div id="child">水平居中布局</div>
</div>
通过以下 CSS 样式代码实现水平居中
#son {
width: 100px; /*必须定宽*/
}
优点：
简单；兼容性好；
缺点：
必须定宽，并且值不能为 auto; 宽度要小于父元素，否则无效；
多个块级元素
原理：text-align 只 控制行内内容（文字、行内元素、行内块级元素）如何相对他的块父元素对齐。
<!--定义父级元素-->
<div id="parent">
<!--定义子级元素-->
<div id="child">水平居中布局</div>
</div>
通过以下 CSS 样式代码实现水平居中
parent{
text-align: center;
}
.son{
display: inline-block;
/*改为行内或者行内块级形式，以达到text-align对其生效*/
}
优点：
简单，容易理解，兼容性非常好；
缺点：
只对行内内容有效；属性会继承影响到后代行内内容；块级改为 inline-block 换行、空格会产生元素间隔；
使用绝对定位实现
原理：子绝（绝对定位）父相（相对定位），top、 right、 bottom、 left 的值 是相对于父元素尺寸的，然后 margin 或者 transform 是相对于自身尺寸的，组合使用达到水平居中的目的；
<!--定义父级元素-->
<div id="parent">
<!--定义子级元素-->
<div id="child">水 平居中布局</div>
</div>
通过以下 CSS 样式代码实现水平居中
#parent{
position: relative; /*子相*/
}
#son{
position: absolute; /* 子绝*/
left: 50%; /* 等同于 margin-left: -50px; */
translatex(-50x);
}
优点：
使用 margin-left 兼容 性好；不管是块级还是行内元素都可以实现；
缺点：
代码较多；脱离文档流；使用 margin-left 需要知道宽度值：使用 transform 兼容性不好 (ie9+);
任意个元素 (flex)
原理：设置当前主轴对齐方式为居中。
<!--定义父级元素-->
<div id="parent">
<!--定义子级元素-->
<div id="child">水 平居中布局</div>
</div>
通过以下 CSS 样式代码实现水平居中
#parent{
display: flex;
justify-content: center;
}
优点：
功能强大；简单方便；容易理解；
缺点：
PC 端兼容性不好，移动端 (Android4. 0+)
垂直居中布局
含义：指当前元素在父级元素容器中，垂直方向是居中显示的；
单行文本 / 行内元素 / 行内块级元素：
原理：line-height 的最终表现是通过 inline box 实现的，而无论 inline box 所占据的高度是多少（无论比文字大还是比文字小），其占据的空间都是与文字内容公用水平中垂线的。
<!--定义父级元素-->
<div id="parent" >
<!--定义子级元素-->
<div id="child">水平居中布局</div>
</div>
通过以下 CSS 样式代码实现水平居中
#parent{
height: 150px;
/*.与height等值*/
line-height: 150px;
}
优点：
简单；兼容性好
缺点：
只能用于单行行内内容；要知道高度的值；
图片垂直居中：
原理：vertical-align 和 line-height 的基友关系。
<!--定义父级元素-->
<div id="parent">
<!--定义子级元素-->
<div id="child">水平居中布局</div>
</div>
通过以下 CSS 样式代码实现水平居中
#parent{
height: 150px;
line-height 150px;
font-size: 0;
}
/*默认是基线对齐，改为middle*/
img#child{vertical-align: middle;}
优点：
简单；兼容性好
缺点：
需要添加 font-size: 0; 才可以完全的垂直居中；不过需要主要，html#parent 包 裹 img 之间需要有换行或空格；
单个块级元素：
使用 tabel-cell 实现：
原理：CSS Table， 使表格内容对齐方式为 middle。
<!--定义父级元素-->
<div id= "parent" >
<!--定义子级元素-->
<div id="child">水平居中布局</div>
</div>
通过以下 CSS 样式代码实现水平居中
#parent{
display: table-cell;
vertical-align: middle;
}
优点： 简单；宽高不定：兼容性好 (ie8+) 缺点： 设置 tabl-cell 的元素， 宽度和高度的值设置百分比无效，需要给它的父元素设置 display: table; 才生效；table-cell 不感知 margin，在父元素上设置 table-row 等属性，也会使其不感知 height; 设置 float 或 position 会对默认布局造成破坏，可以考虑为之增加一个父 div 定义 float 等属性；内容溢出时会自动撑开父元素；
3-2. 使用绝对定位实现：
原理：子绝父相，top、 right、 bottom、 left 的值是相对于父元素尺寸的，然后 margin 或者 transform 是相对于自身尺寸的，组合使用达到水平居中的目的。
<!-- 定义父级元素-->
<div id="parent">
<!--定义子级元素-->
<div id="child">水平居中布局</div>
</div>
#parent(
position: relative; /*父相*/
}
#child{
position: absolute; /*子他*/
top: 50%;
/*自身高度-不,这里等月于margin-top:-25px;*/
transform: translate(-50%);
height: 50px;
}
/
#parent{ position: relative; }
#child{
position: absolute;
margin: auto;
top: 0;
bottom: 0;
height: 50px;
}
优点： 使用 margin-top 兼容性好；不管是块级还是行内元素都可以实现 缺点： 代码较多；脱离文档流；使用 margin-top 需要知道高度值：使用 transform 兼容性不好 (ie9+ )
使用 flex 实现：
原理：flex 设置对齐方式。
<!--定义父级元素-->
<div id="parent">
<!-- 定义子级元素-->
<div id="child">水平居中布局</div>
</div>
通过以下 CSS 样式代码实现水平居中
#parent{
display: flex;
align-items: center;
}
优点：
功能强大；简单方便；容易理解；
缺点：
PC 端兼容性不好，移动端 (Android4. 0+)
水平垂直居中布局
含义：指当前元素在父级元素容器中，水平垂直方向都是居中显示的；
利用 table-cell 実現：
原理：CSSTable, 使表格内容垂直対斉方式内 middle, 突現垂直居中；然后根据是行内内容丕是
块级内容采取不同的方式到水平居中。
<!--定乂父級元素-->
<div id="parent" >
<!-- 定文子級元素-->
<div id="child">水 平居中布局</div>
</div>
#parent{
display: table-cell;
vertical-align: middle;
/* text-align: center; */ /*如果是行内元素就添加过 */
}
#child{
display: table;
margin: 0 auto;
/*如果是快綬元素就添加过*/
}
优点:
简单;适用于宽度高度未知情况;兼容性好(ie8+)
缺点:
vertical-align属性 具有继承性，导致父元素的文本也是居中显示的;
定位 position 实现：
原理：子绝父相，top、 right、 bottom、 left 的值是相对于父元素尺寸的，然后 margin 或者 transform 是相对于自身尺寸的，组合使用达到几何上的水平垂直居中。
<!--定义父级元素-->
<div id="parent">
<!--定义子级元素-->
<div id="child">水 平居中布局</div>
</div>
通过以下 CSS 样式代码实现水平居中
#parent{position: relative;}
#child{
position: absolute;
top: 50%;
left: 50%;
/*定宽高时等同于margin-left:负自身宽度一半;margin-top:负自身高度一半;*/
transform: translate(-50%, -50%);
}
优点:
使用margin兼容性好;不管是块级还是行内元素都可以实现
缺点:
代码较多;脱离文档流;使用margin需要知道宽高;使用transform兼容性不好(ie9+) ;
利用 flex 实现：
原理：flex 设置对齐方式。
<!--定义父级元素-->
<div id= "parent">
<!--定义子级元素-->
<div id="child">水 平居中布局</div>
</div>
通过以下 CSS 样式代码实现水平居中
#parent{
display: flex;
justify-content: center;
align-items: center;
}
