CSS-幾種元素居中方式

margin
table居中
利用伸縮盒居中

---

margin居中

<div style="width: 100px;
            height: 100px;
            margin: 0 auto;
            background-color: greenyellow;">
            居中
</div>

table居中
適用於文字居中，還有line-height ;

<!--css-->
  .box1{
            width: 100px;
            height: 100px;
            background-color: aquamarine;
            display: table;
        }
        .box2{
            display: table-cell;
            vertical-align: middle;
            text-align: center;
        }

<!--html-->
<div class="box1">
    <p class="box2">居中</p>
</div>

利用伸縮盒居中
flex-box，以Chrome爲例，設置Chrome內核的彈性盒子

<!--css-->
 .outter{
            width: 200px;
            height: 200px;
            background-color: gold;
            display: -webkit-box;
            -webkit-box-align: center;
            -webkit-box-pack: center;
        }
        .inner{
            width: 100px;
            height: 100px;
            background-color: aqua;
            display: -webkit-box;
            -webkit-box-align: center;
            -webkit-box-pack: center;
        }

<!--html-->
<div class="outter">
    <div class="inner">
        居中
    </div>
</div>