css水平居中与垂直居中总结

水平居中总结

1. 行内级元素（如inline或inline-block）
   设置父元素的text-align:center
2. 块级元素(block)
   设置当前块级元素（宽度）margin:0 auto
3. 绝对定位（Positition）
   元素有宽度的情况下 left:0;right:0;margin:0 auto
4. flex布局
   justify-content:center

垂直居中总结

1. 绝对定位
   元素有宽度的情况下： top:0;bottom:0;margin:auto 0
   弊端明显：一：脱离标准流；二：必须给绝对定位的元素设置高度，否则就被拉长跟父元素一样长了。
2. flex布局
   align-items: center .设置父元素上。不设置高度也可以用
   弊端：一、当前所有元素都会被居中。二、相对来说，兼容性差一点
3. line-height
   设置line-height与height一样高，对块元素不适用，inline元素和inline-block元素一样。
4. transform平移
   做两件事。一:让子元素平移父元素的50%；二：让子元素平移自身的50%

   1、让子元素平移父元素的50%
   posititon：relative;
   top:50%;
   2、让子元素平移自身的50%
   transform:translate(0,-50%)