css实现垂直居中的方式

html模板部分

 
<div class="parent">
 
<div class="content">内容垂直居中</div>
 
</div>

 

 

1.绝对定位，配合top:50%和负margin-top(元素高度一半)进行垂直居中

.content{
 
  position: absolute;
 
  top: 50%;
 
  left: 50%;
 
  margin-top: -10px; /* 为元素height/2 */
 
  margin-left: -10px;
 
  width: 20px;
 
  height: 20px;
 
  background-color: aqua;
 
}

 2.绝对定位，配合top:0;bottom:0;和margin:auto进行垂直居中

.content{
 
  position: absolute;
 
  margin：auto；
 
  top: 0;
 
  bottom: 0;
 
  left: 0;
 
  right: 0;
 
  height: 200px; /*要求指明元素高度*/
 
  background-color: aqua;
 
}

 3.设置position:absolute;和calc()函数实现垂直居中

.content{
 
  position: absolute;
 
  top:calc(50% - 10px); /*calc(50% - 元素本身高度一半)*/
 
  left: calc(50% - 20px); /*注意使用时减号间有空格*/
 
  width: 40px;
 
  height: 20px;
 
  background-color: aqua;
 
}

4.设置position：absolute；和transform:traslate(x,y)实现水平垂直居中

.content{
 
  position: absolute;
 
  margin：auto；
 
  top: 50%;
 
  left: 50%;
 
  transform:translate(-50%,-50%); /*针对元素本身向左以及向上移动50%*/
 
  background-color: aqua;
 
}