【css布局】-垂直水平居中

参考GitHub项目： https://github.com/Sweet-KK/css-layout
wiki： https://www.sweet-kk.top/css-layout/#/
实例： https://www.sweet-kk.top/css-layout-demo/html/index.html

垂直水平居中ヾ(◍°∇°◍)ﾉﾞ注：本文是上述GitHub项目的学习笔记

1、行内/行内块级/图片

text-align控制行内内容相对于块父元素水平居中；line-height和vertical-align使垂直居中，font-size是消除近似居中的bug。

#parent {
 height： 100px;
 line-height: 100px; /*行高和height等值*/
 text-align: center; /*水平居中*/
 font-size: 0;
}
#son {
 display: inline-block; /*块级元素需改为行内或行内块级*/
 vertical-align: middle;
}

2、table-cell

原理：CSS Table，使表格内容垂直对齐方式为middle,然后根据是行内内容还是块级内容采取不同的方式达到水平居中

#parent{
height: 150px;
width: 200px;
display: table-cell;
vertical-align: middle;
/*text-align: center;*/ /*如果是行内元素就添加这个*/
}
#son{
/*margin: 0 auto;*/ /*如果是块级元素就添加这个*/
width: 100px;
height: 50px;
}

3、button作为父元素

原理：button的默认样式，再把需要居中的元素表现形式改为行内或行内块级就好

button#parent{ /*改掉button默认样式就好了,不需要居中处理*/
height: 150px;
width: 200px;
outline: none;
border: none;
}
#son{ d
isplay: inline-block; /*button自带text-align: center,改为行内水平居中生效*/
}

* 优点：简单方便，充分利用默认样式
* 缺点：只适用于行内内容；需要清除部分默认样式；水平垂直居中兼容性很好，但是ie下点击会有凹陷效果！

4、绝对定位

原理：子绝父相，top、right、bottom、left的值是相对于父元素尺寸的，然后margin或者transform是相对于自身尺寸的，组合使用达到几何上的水平垂直居中

#parent {position: relative;}
#son {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);/*定宽高时=margin-left:负自身宽度的一半；margin-top:负自身高度的一半*/
}

* 优点：使用margin兼容性好；不管是块级还是行内元素都可以实现
* 缺点：代码较多；脱离文档流；使用margin需要知道宽高；使用transform兼容性不好（ie9+）

5、绝对居中

原理：当top、bottom为0时,margin-top&bottom设置auto的话会无限延伸占满空间并且平分；当left、right为0时,margin-left&right设置auto的话会无限延伸占满空间并且平分

#parent{position: relative;}
#son{
position: absolute;
margin: auto;
width: 100px;
height: 50px;
top: 0;
bottom: 0;
left: 0;
right: 0; }

* 优点：无需关注宽高；兼容性较好(ie8+)
* 缺点：代码较多；脱离文档流

6、flex

设置排列方式、对齐方式

#parent{display: flex;}
#son{margin: auto;}

或
#parent{
display: flex;
justify-content: center;/*水平向*/
align-items: center; } /*垂直向*/

或
#parent{
display: flex;
justify-content: center;
}
#son{align-self: center;}

7、视窗居中

原理：vh为视口单位，视口即文档可视的部分，50vh就是视口高度的50/100，设置50vh上边距

#box {
/*0如果去掉，则会多出滚动条并且上下都是50vh的margin。如果去掉就给body加上overflow:hidden;*/
margin: 50vh auto 0;
transform: translateY(-50%); }

总结：

* 绝对定位：子绝父相，子元素再用transform移动-50%
* 绝对居中：子绝父相，子元素margin: auto;偏移属性均设0.用margin撑开。
* 行内/行内块级/图片：父元素text-align:center（水平居中）；line-height：height值；font-size：0（消除不完全居中bug）；子元素vertical-align: middle;   display:inline-block;
* flex.父元素display: flex; 子元素margin: auto 或者父元素display:flex; justify-content:center;align-items:center;