css 水平垂直居中的几种常用方法

1. display 方法（最常用的方法）
　　display: flex;
　　justify-content: center;
　　align-items: center;
2. 定位
　　1）固定宽高(100px)
　　　　.parent{
　　　　　　position: relative;
　　　　}
　　　　.child{
　　　　　　position: absolute;
　　　　　　top: 50%;
　　　　　　left: 50%;
　　　　　　margin-left: -50px;
　　　　　　margin-top: -50px;
　　　　}
　　2) 有宽高，但不考虑宽高
　　　　.parent{
　　　　　　position: relative;
　　　　}
　　　　.child{
　　　　　　position: absolute;
　　　　　　top: 0;
　　　　　　left: 0;
　　　　　　right: 0;
　　　　　　bottom: 0;
　　　　　　margin: auto;
　　　　　　height: 50px;
　　　　　　width: 80px;
　　　　}
　　3) 木有具体宽高
　　　　.parent{
　　　　　　position: relative;
　　　　}
　　　　.child{
　　　　　　position: absolute;
　　　　　　top: 50%;
　　　　　　left: 50%;
　　　　　　transform: translate(-50%,-50%);
　　　　}
3. 控制文本（table-cell）--- margin + vertical-align
　　.parent{
　　　　display:table-cell;
　　　　vertical-align: middle;
　　}
　　.child{
　　　　display: table;
　　　　margin: 0 auto;
　　}
4. 控制文本（table-cell）--- text-align + vertical-align
　　.parent{
　　　　display: table-cell;
　　　　text-align: center;
　　　　vertical-align: middle;
　　}
    .child{
　　　　width: 80px;
　　　　display: inline-block;
　　}
5. text-align + line-height实现单行文本水平垂直居中
　　.test{
　　　　text-align: center;
　　　　line-height: 100px;
　　}

css 水平垂直居中的几种常用方法

原文：https://www.cnblogs.com/qianxiaoniantianxin/p/14666047.html