CSS-居中

水平居中

1. 绝对定位+left+margin-left

.first{
    position: absolute;
    left: 50%;
    margin-left: -50px;//也就是1/2width
}

☠️必须得知道物体的宽高

2.绝对定位+left+transform

.second{
    position: absolute;
    left:50%;
    -webkit-transform: translate(-50%);
    -moz-transform: translate(-50%);
    -ms-transform: translate(-50%);
    -o-transform: translate(-50%);
    transform: translate(-50%);
}

😍transform的妙用，translate位移是针对自身的，所以可以不知道自身的宽度，是上面的升级版。

3.绝对定位+margin+左右

.third{
     margin:auto;
     position: absolute;
     left:0;
     right:0;
 }

😍margin的妙用，如果设置左右为0，那么水平居中，如果设置上下左右都为0，那么就在整个页面居中（也就是水平也居中垂直也居中），换言之，如果值设置上下为0，那么垂直方向居中。

4.flex布局

.box{
  display:flex;
  justify-content:center;
}

😍很简洁的样子，给父元素设置两行就能做到水平居中了

• 相对定位+margin

.fouth{
  position:relative;
  margin:x auto x;//x代表随意的数值
}

😍好简洁

5.text-align

.box{
  text-align:center;
}

😍text-align属性只对行内元素有效，比如图片、文字、span等，当然也能让它对div奏效，把块级元素设为行内元素就行了。这个属性是设置在父盒子上面的。一般用来设置图片和文字居中比较多。

垂直居中

1.line-height

.box{
  line-height:50px;
}

😍设置行高，子元素会垂直居中，不论是行内还是块级子元素都有效。
☠️只对单行文字有效。

2.多行文字垂直居中

//第一种
.box{
  display:table;
  height:200px;
}
.child{
  display:table-sell;
  vertical-aligh:middle;
}
//第二种
.box{
  display:table-sell;
  height:200px;
  vertical-align:middle;
}
.child{
  display:inline-block;
}

👉vertical-align是用来指定行内元素和表格单元格（table-sell）元素的垂直对齐方式