一、使用text-align: center;居中

對於行內元素或具有inline-block屬性的元素居中，比如span、img等可以使用text-align: center;來實現。

/*css*/
div{
    border:1px solid red;
    text-align: center;
    width: 200px;
}
div span{
    width: 100px;
    background: #ddd;
}

<!--HTML-->
<div>
    <span>我是span元素</span>
</div
 
>

/*css*/
div{
    border:1px solid red;
    text-align: center;
    width: 200px;
}
div img{
    height: auto;
    background: #ddd;
}
<!--HTML-->
<div>
    <img src="a.jpg" alt="馬超" width="100">
</div>

二、使用margin: auto；居中

使用margin: auto；來居中是平時佈局裡面最常用的了，但是和第一種方法不同的是這種css屬性作用於本身元素，且必須給元素設定了寬度和具有display：block；的塊級元素。

/*css*/
div{
    border:1px solid red;
    width: 200px;
}
div span{
    width: 150px;
    background: #ddd;
    margin:0 auto;
    display: block;
}

<!--HTML-->
<div>
    <span>我是span元素</span>
</div>

三、定位居中

這種方法好處是行內元素和塊級元素都適用,但是需要知道元素本身的寬度

/*css*/
div{
    border:1px solid red;
    width: 200px;
    height: 200px;
    position: relative;
}
div span{
    width: 150px;
    height: 50px;
    background: #ddd;
    position: absolute;
    left: 25px;
    top:75px;
}

<!--HTML-->
 

<div>
    <span>我是span元素</span>
</div>

四、margin：auto；和定位的組合使用

這種方法好處是行內元素和塊級元素都適用,但是需要知道元素本身的寬度。

/*css*/
div{
    border:1px solid red;
    width: 200px;
    height: 200px;
    position: relative;
}
div span{
    width: 150px;
    height: 50px;
    background: #ddd;
    position: absolute;
    margin:auto;
    left: 0;
    right: 0;
    top:0;
    bottom: 0;
}

<!--HTML-->
<div>
    <span>我是span元素</span>
</div>

五、負margin和定位的組合使用

/*css*/
div{
    border:1px solid red;
    width: 200px;
    height: 200px;
    position: relative;
}
div span{
    width: 150px;
    height: 50px;
    background: #ddd;
    position: absolute;
    left: 50%;
    top:50%;
    margin:-25px 0 0 -75px;
}

<!--HTML-->
<div>
    <span>我是span元素</span>
</div>

六、calc和定位的組合使用

calc是英文單詞calculate(計算)的縮寫，是css3的一個新增的功能，你可以使用calc()給元素的border、margin、pading、font-size和width等屬性設定動態值。
calc使元素居中的原理和負margin是一樣的，calc 允許你基於當前的頁面佈局計算尺寸。在上面的簡單計算中， 50% 是容器元素的中心點，但是如果只設置50%會使圖片的左上角對齊div的中心位置。 我們需要把圖片向左和向上各移動圖片寬高的一半。計算公式為：

top: calc(50% - (40% / 2));
left: calc(50% - (40% / 2));

/*css*/
div{
    border:1px solid red;
    width: 200px;
    height: 200px;
    position: relative;
}
div span{
    width: 150px;
    height: 50px;
    background: #ddd;
    position: absolute;
    top: calc(50% - (50px / 2));
    left: calc(50% - (150px / 2)); 
}

<!--HTML-->
<div>
    <span>我是span元素</span>
</div>

七、使用translate居中

這種方法實現原理和第五種是一樣的，就是用css3的屬性translate來達到和負margin一樣的作用。translate是transform的一個值，在這裡作用是定義2D轉換。但是在IE9以下不支援。

/*css*/
div{
    border:1px solid red;
    width: 200px;
    height: 200px;
    position: relative;
}
div span{
    width: 150px;
    height: 50px;
    background: #ddd;
    position: absolute;
    left: 50%;
    top:50%;
    transform: translate(-50%, -50%);
}

<!--HTML-->
<div>
    <span>我是span元素</span>
</div>

八、使用flex居中

使用flex居中不需要知道元素本身寬高以及元素的屬性。

/*css*/
div{
    border:1px solid red;
    width: 200px;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
}
div span{
    background: #ddd;
}

<!--HTML-->
<div>
    <span>我是span元素</span>
</div>

九、使用table-cell居中

使用 display: table-cell, 而不是使用table標籤; 可以實現水平居中和垂直居中，但是這種方法需要新增額外的元素作為外部容器。

/*css*/
.center-aligned{
    border:1px solid red;
    width: 200px;
    height: 200px;
    display: table;
}
.center-core{
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
span{
    background: #ddd;
}

<!--HTML-->
<div class="center-aligned">
    <div class="center-core">
        <span>我是span元素</span>
    </div>
</div>