CSS居中

一. 目的：

知道在某种场景下该使用何种居中。

二. 内容

1. 简单的水平居中

1.1 text-align: center;
使用场景 作用在block上，使文本或子元素在block里水平居中

1.2 margin: 0 auto;
使用场景：让声明了宽度的块级元素水平居中。固定宽度水平居中，大部分网页都是这样布局。

2 垂直居中

2.1 上下padding相等
使用场景： 适用于子元素高度不确定、父容器高度不固定的情景

2.2 设置height与line-height相等
使用场景： 能确定被居中的元素只有一行，比如单行文本、按钮等

3 垂直水平绝对居中

使用场景： 父容器宽高不确定的情景，可用于适应不同的屏幕

3.1 此种适用于被居中元素宽高固定时

 E {
     width:200px;
     height: 100px;
     position: absolute/fixed;
     left: 50%;
     top: 50%;
     margin-left: -100px;
     margin-top: -50px;
 }

3.2 此种适用于被居中元素宽高固定或不固定时

E {
    position: absolute/fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%)；
 }

三 . 补充：

第3种绝对居中通常应用于页面大小为viewport全屏的时候。把页面大小为viewport全屏有2中方法。

1. 设置宽高为100%，适用于网页首页、次页都为全屏的情景。

   body,
   html,
   F {
       height: 100%;
   } 
   

2. 设置相对定位，适用于弹框等不用翻页的页面。

   F {
      position: absolute/fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
   }