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

 

posted @ 2020-08-01 14:58  流弊的小涛  阅读(143)  评论(0编辑  收藏  举报