在css中居中效果可以分為：水平居中、垂直居中邓深、水平垂直居中三種。最近小程序開發(fā)項目中也經(jīng)常遇到居中效果設(shè)置問題笔刹，即簡單歸納芥备，以便后期使用。
水平居中：
方法1：margin和width實現(xiàn)水平居中
.center {
width: 200rpx;
margin-left: auto;
margin-right: auto;
/*或者margin: 0 auto;代替*/
}
這種是最簡單的舌菜，但前提必須固定寬度值萌壳，margin-left & margin-right 設(shè)置為auto。但在IE下如果web頁面未明確聲明“!DOCTYPE”日月，要保證水平居中效果袱瓮，則按如下進(jìn)行設(shè)置即可：
/*html*/
<div class="container">我的頁面</div>
body {
text-align: center;
}
.container {
text-align: left;
width: 1024px;
margin: 0 auto;
}
方法2: text-align實現(xiàn)水平居中
.center {
text-align:center;
}
這種方法適用在塊級父容器中讓行內(nèi)(inline)或類行內(nèi)(inline-block/inline-table) 和 flex類型元素居中
方法3: inline-block 和 text-align 實現(xiàn)多個塊元素水平居中
/*設(shè)置塊元素*/
.center {
display: inline-block;
width: 80rpx;
height: 100rpx;
}
/*設(shè)置塊元素的父容器*/
.father-container {
text-align: center; /*注意：這個必須設(shè)置*/
width: 100%;
height: 100rpx;
}
方法4: fixed實現(xiàn)浮動居中
.center {
position: fixed;
display: flex;
left: 0；
right: 0;
bottom: 100rpx;
margin: 0 auto;
}
方法5: flex & justify-content 實現(xiàn)多個子元素水平居中
.father-container {
display: flex;
flex-direction: row; /*默認(rèn)且必為主軸方向*/
justify-content: center;
height: 100rpx;
}
垂直居中：
方法1: inline-height 和 height 相等
.center {
height: 100rpx;
line-height: 100rpx;
white-space: nowrap;
}
這種方法適用于文本不換行的情況下使用
方法2: padding-top 和 padding-bottom 相等
.center {
padding-top: 30rpx;
padding-bottom: 30rpx;
}
這種方法適合于單行行內(nèi)或文本元素爱咬，對于多行文本可在其父容器增加如下設(shè)置：
.father-container {
display: table-cell;
vertical-align: center;
}
方法3: flex & justify-content 實現(xiàn)多個子元素垂直居中
.father-container {
display: flex;
flex-direction: column;/*必須為列*/
align-items: center;
height: 100rpx;
}
參考資料：
CSS--項目中那些居中問題
CSS 水平對齊(Horizontal Align)
整理: 子容器垂直居中于父容器的方案
解決 flex align-items: center 無法居中(微信小程序)
