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;

}