CSS居中

一、文本居中

1、横向居中

text-aline:center;

2、单行文本垂直居中

line-height:height;

3、多行文本垂直居中

盒子不设置高度，同时设置上下相同的padding；

.box{
    width:400px;
    font-size:20px;
    line-height:40px;
    padding:20px 0px;
}

二、块级元素居中：

1、横向居中
①已转块或块级：

margin:0 auto;

②绝对定位（宽度定值）

.box{
  position:relative;
}
.box .son{
  width:400px;
  position:absolute;
  left:50%;
  margin-left:-200px;      
}

③空间移动（宽度不定）

.box{
  position:relative;
}
.box .son{
  width:400px;
  position:absolute;
  left:50%;
  transform:translateX(-50%);/*空间移动，水平移动*/   
}

2、垂直居中

①不设置父盒子高度，同时设置上下相同的padding，前提是块级元素和父盒子宽度都固定

.box {
  width: 400px;
  /*
  子盒子垂直居中
  父盒子高度省略
  设置相同的上下padding
  */
  padding: 100px 0;
  border: 1px solid #000;
}
.box .son {
    width: 200px;
    height: 50px;
    background-color: lightblue;
    margin: 0 auto;
}

②绝对定位（高度固定）

.box{
  position:relative;
}
.box .son{
  heighr:400px;
  position:absolute;
  top:50%;
  margin-top:-200px; 
}

③空间移动（高度不定）

.box{
  position:relative;
}
.box .son{
  height:400px;
  position:absolute;
  top:50%;
  transform:translateY(-50%);/*空间移动，垂直移动 */     
}

3、水平垂直居中

①宽高固定

.box{
  position:relative;
}
.box .son{
  width:400px;
  height:400px;
  position:absolute;
  left:50%;
  top:50%;
  margin-top:-200px;
  margin-left:-200px;
}

②宽高不固定

.box{
  position:relative;
}
.box .son{
  position:absolute;
  left:50%;
  top:50%;
  transform:translateX(-50%);/*空间移动，水平移动 */
  transform:translateY(-50%); /*空间移动，垂直移动*/
}