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>