html代碼

?

<div class="vertical">
　　<div class="content"></div>
</div>

　　m-1：絕對定位 優(yōu)點：兼容性好，不需要知道寬高，適用于塊級元素 缺點：脫離文檔流

.vertical {
　　position: relative;
　　width: 200px;
　　height: 200px;
　　margin: 0 auto;
　　margin-top: 10px;
　　border: 1px solid blue;
}
.content {
　　position: absolute;
　　width: 50px;
　　height: 50px;
　　background-color: red;
　　margin: auto;
　　left: 0;
　　right: 0;
　　top: 0;
　　bottom: 0;
}

　　m-2：line-height 優(yōu)點：兼容性好，適用于inline和inline-block元素 缺點：需要對父元素進行完全控制

.vertical {
　　position: relative;
　　width: 200px;
　　height: 200px;
　　line-height: 200px;
　　margin: 0 auto;
　　margin-top: 10px;
　　border: 1px solid blue;
　　font-size: 0; // 必須設(shè)置font-size為0
}
.content {
　　display: inline-block;
　　width: 50px;
　　height: 50px;
　　background-color: red;
　　vertical-align: middle;
　　font-size: 12px;
　　line-height: 1.2em;
}

　　　　m-3：table 優(yōu)點：具有良好的自適應(yīng) 缺點：父級具有表格屬性，需要外套一層wraper　　

.vertical {
　　display: table-cell;
　　width: 200px;
　　height: 200px;
　　border: 1px solid blue;
　　vertical-align: middle;
　　text-align: center;
}
.content {
　　display: block;
　　width: 50px;
　　height: 50px;
　　margin: 0 auto;
　　background-color: red;
}

　　　　m-4：flex 優(yōu)點：自適應(yīng)性強，對任意類型子元素實現(xiàn)垂直居中 缺點：兼容性　　　

.vertical {
　　display: flex;
　　flex-direction: row;
　　width: 200px;
　　height: 200px;
　　border: 1px solid blue;
　　justify-content: center;
　　align-items: center;
}
.content {
　　width: 50px;
　　height: 50px;
　　background-color: red;
}

轉(zhuǎn)載于:https://www.cnblogs.com/171220-barney/p/8869828.html

總結(jié)

以上是生活随笔為你收集整理的如何实现居中对齐的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。