div居中

文本居中

text-align功能

设置或检索对象中文本的左中右对齐方式

div居中

核心思想：absolute + 平移

平移方法1：top,left(div左上角顶点移到body中心） + margn-left,margin-top(div中心点移到body中心）

div顶点位于中心，再平移操作即可水平垂直居中

 1 div {
 2             position: absolute;
 3             top: 50%;
 4             left: 50%;
 5             margin-left: -250px;
 6             margin-top: -250px;
 7              500px;
 8             height: 500px;
 9             background-color: aqua;
10             border: 1px solid red;
11         }

缺陷：需要提前知道元素的尺寸。否则margin负值的调整无法精确。此时，往往要借助JS获得。

CSS3的兴起，使得有了更好的解决方法，就是使用transform代替margin. transform中translate偏移的百分比值是相对于自身大小的

top,left(div左上角顶点移到body中心） + transform: translate(-50%, -50%)(div中心点移到body中心）

1 div {
2     ......
3     transform: translate(-50%, -50%);
4 }

平移方法2： top、left、right、bottom(设定可用空间，相等即平分) + margin: auto(平分上下左右距离)

top = left = right = bottom即可，auto其计算值决定于可用空间

margin:auto=margin:auto auto auto auto

margin:0 auto=margin:0 auto 0 auto （没设定上下空间，即上下相等不成立）

 1   div {
 2             background-color: darkorchid;
 3              200px;
 4             height: 200px;
 5             position: absolute;
 6             top: 0;
 7             left: 0;
 8             right: 0;
 9             bottom: 0;
10             margin: auto ;
11         }

水平居中（设定可用空间再居中）

1   position: absolute;
2   left: 0;
3   right: 0;
4   margin:  auto ;

垂直居中（设定可用空间再居中）

1     position: absolute;
2     top: 0;
3     bottom: 0;
4     margin:  auto ;