1、表格實現

父級{display:table;} 子級{display:table-cell;vertical-align:middle;} display:table- cell屬性類似于td標簽。會受一些css屬性破壞：float,position:absolute;display與這些樣式同用會失去效果。而且table-cell對margin無反應。

2、inline-block設置垂直居中

<style> html,body{height:100%;} .wrapper{height:100%;}/* 在content容器之前構造一個空內容的inline-block，讓空內容行內上下對齊 */ .wrapper:before{content:"";display:inline-block;height:100%;vertical-align: middle;} .content{width:98%;display:inline-block;vertical-align: middle;} </style> <div class="wrapper"><div class="content">content</div> </div>

?

3、flex布局實現居中

{display: flex;justify-content: center; /* 水平居中 */align-items: center; /* 垂直居中 */ }

?

4、居中定位

.center {position: absolute;top: 50%;left: 50%;width:50%;height: 50%;-webkit-transform: translateX(-50%) translateY(-50%);-moz-transform: translateX(-50%) translateY(-50%);-ms-transform: translateX(-50%) translateY(-50%);transform: translateX(-50%) translateY(-50%); }

?

總結

以上是生活随笔為你收集整理的元素垂直居中的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。