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

时间 2019-12-07

标签关于页面元素容器水平居中垂直问题繁體版

原文原文链接

.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的值css

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