1、表格實現 display:table- cell屬性類似於td標簽。會受一些css屬性破壞：float,position:absolute;display與這些樣式同用會失去效果。而且table-cell對margin無反應。 2、inline-block設置垂直居中 3、flex佈局實現居中 ...
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%); }
