CSS 常见布局 水平垂直居中对齐

一 水平居中

1 行内元素水平居中

行内元素一般是文本，图标等，text-align可以控制其相对于父元素水平居中对齐

#parent{
   
    text-align: center;
}

2 margin 自动水平居中

单个块级元素，可以使用margin auto可自动左右对齐，不过要首先设定宽度

#son{
   
    width: 100px; /*必须定宽*/
    margin: 0 auto;
}

另外还可以通过设置父子宽度，使用具体的margin绝对定位对齐

3 块级改行内块级水平居中

多个块级元素时，父元素使用text-align居中对齐，子元素使用inline-block改为行内块级元素即可

#parent{
   
    text-align: center;
}
.son{
   
    display: inline-block