如何實現居中對齊

html代碼

 

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

　　m-1：絕對定位 優勢：兼容性好，不須要知道寬高，適用於塊級元素 缺點：脫離文檔流

.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 優勢：兼容性好，適用於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; // 必須設置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 優勢：具備良好的自適應 缺點：父級具備表格屬性，須要外套一層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 優勢：自適應性強，對任意類型子元素實現垂直居中 缺點：兼容性　　　

.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;
}