CSS---居中总结

CSS中元素居中方式总结

居中：盒子在其包含块中居中；
主要有以下几类方式：

行盒（行块盒）水平居中

直接通过设置行盒（行块盒）的父元素方式
text-align:center;

常规流 块盒水平居中

首先需要先定宽width，再设置左右的margin为auto（auto会自动吸收剩余空间，所以需要先定宽度）
width:20px;
margin: 20px auto;

绝对定位元素的水平居中

定宽，设置左右的坐标为0（left:0; right:0），再将左右margin设置为auto；
left:0;
right:0;
margin:20px auto;
实际上固定定位fixed是绝对定位absolute的特殊情况；

单行文本的垂直居中

设置文本所在元素的行高（line-height）等于整个区域的高度值（height）
height:20px;
line-height=20px;

行块盒或块盒内多行文本的垂直居中

在这一过程中没有具体措施，可以通过设置盒子的上下内边距（padding），达到类似的效果
padding:20px 0 20px 0;

绝对定位元素的垂直居中

先定高，在设置盒子的上下坐标为0
height:20px;
top:0;
bottom:0;
margin:auto;