css中垂直居中方法

水平居中 text-align：center：

块级元素水平居中-采取绝对定位方式：
{
.center{
width:960px;
position:absolute;
left:50%;
margin-left:-480px;
}

}

自适应块级元素水平居中

借助css3的变形属性 transfor 来完成
.content{
position:absolute;
left:50%;
transform:translateX(-50%);
}

行内元素垂直居中：

*单行文本的垂直居中：
1.元素的宽度和行高相等时，文本呈现垂直居中

*多行文本的垂直居中：

1.不固定高度的垂直居中
通过设置padding

2.固定高度的垂直居中
使用display设置为table，配合样式
vertical-align设置为middle来实现

块级元素的垂直居中：

*固定宽高的垂直居中：

1. .content{
   width:100px;
   heigth:100px;
   position:absolute;
   left:50%;
   top:50%;
   margin-left:-50px;
   margin-top:-50px;
   }

*不固定宽高的垂直居中

1. .content{
   position:absolute;
   left:50%;
   top:50%;
   左/上边缘向左/上移动自身宽/高度的一半
   transform:translate(-50%,-50%);
   }

基于flex实现垂直居中

移动端中最佳的解决方案

.contert{
转为flex弹性盒子布局
display：flex;
主轴上的对齐方式为居中
justify-content:center;
交叉轴上对齐方式为居中
align-items:center;
}