關於頁面元素在父容器裏水平居中、垂直居中的問題

.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