css水平居中的方法及代码

一、水平居中

（1）行内元素

行内元素包括文本，图片，p标签等。可以通过设置父元素的text-align=center。

    .center{
     
        text-align: center;
    }

行内元素水平居中
p
a

（2）元素宽度确定

当前元素的宽度是确定的时候设置当前元素的margin为auto

   .second{
     
        width: 100px;
        height: 100px;
        margin:auto;
        background-color: brown;
    }

（3）当前元素为绝对定位

当前元素为绝对定位时，不需要有明确的宽度。可以设置父元素为相对定位，当前元素为绝对定位，且left=0,right=0,margin=auto.

    .third{
     
        width: 100%;
        height: 100px;
        border: solid 1px #000000;
        position: relative;
    }
    .thirdchild{
     
        width: 50%;
        height: 100px;
        position: absolute;
        left: 0;
        right: 0;
        margin: auto;
        background-color: brown;
    }

（4）采用flex box 布局

设置父元素的display属性为flex，justify-content=center;

   .fourth{
     
        width: 100%;
        height: 100px;
        border: solid 1px #000000;
        display:flex;
        justify-content: center;
    }
    .fourthchild{
     
        width: 50%;
        height: 100px;
        background-color: brown;
    }

（5）采用table cell 布局

对于不是表格的元素，可以通过 display: table-cell 将其模拟成一个表格单元格 td。设置父元素的display为table cell，并设置text-aglin=center就可以水平居中了。注意当前元素必须为行内元素，text-aglin才起作用。vertical-align: middle;垂直居中没有这一限制。

    .fifth{
     
        width: 200px;
        height: 200px;
        border: solid 1px #000000;
        display: table-cell;
        text-align: center;
        vertical-align: middle;
    }

表格1
表格2
表格3