如何实现居中对齐

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