关于页面元素在父容器里水平居中、垂直居中的问题

2019独角兽企业重金招聘Python工程师标准>>>

.container{
   margin-right: auto;/**容器水平居中*/
   margin-left: auto;
   
   width: 50%;
   height: 300px;
   border: 1px solid red;
}
.container a{
 margin: 5px;
 padding: 15px;
 line-height: 280px;;/**在容器里垂直居中*/
}

<div class="container">
 <a href="#">我要垂直居中</a>
</div>

 

要点：想要在父容器里垂直居中显示，直接设置line-height为父容器的高度，但是要减去margin，padding的值

公式：line-height = 父容器高度 - 子容器margin - 子容器padding

转载于:https://my.oschina.net/u/233090/blog/417608