css居中方法大全

水平居中

内联元素
text-align: center 这个属性会让内联子元素水平居中

块级元素

  margin-left: auto;
  margin-right: auto;

水平居中通用方法

margin-left: 50%;
transform: translateX(-50%);

这个方法可以让内联元素自身居中，margin的百分值是相对于父元素的，相当于position: relative; left: 50%,transformX的百分值是针对自身的，相当于margin-left：-自身大小一半，但它原来的位置空间还是在的

定位居中

position: absolute;
letf: 50%;
transform: translateX(-50%);

垂直居中

内联元素

.parent {
    height: 100px;
}
.children {
    line-height: 100px; /* 将行高设置为和父元素一样高就可以了*/
}

定位居中

position: absolute;
top: 50%;
transform: translateY(-50%);

flex布局

.parent {
    display: flex;
    align-items: center; /* 水平居中 */
    justify-content: center; / * 垂直居中 */
    margin: auto; /* 水平垂直居中 */
 }
.children {
/* */
}