將div中的嵌入式塊垂直對齊並固定高度

Question

密碼筆

我要垂直和水平對齊，容器的高度和寬度將因其他因素而固定。

我怎么做？

我試過使用flex

display: flex;
justify-content: center;
flex-direction: column;

但是它擺脫了我的水平對齊方式

Answer 1

實際上，有多種 方法可以實現垂直對齊，這是一種：

 div { width: 300px; height: 150px; background-color: #ddd; text-align: center; font-size: 0; } div::before { content: ""; display: inline-block; height: 100%; vertical-align: middle; } a { width: 100px; height:50px; background-color: #ff0000; display: inline-block; vertical-align: middle; font-size: 16px } 

 <div> <a href="#">Some Text</a> </div> 

Answer 2

找到了解決方案！

在div父對象上：

position:relative;

在一個孩子上：

position: absolute;
top: 50%;
left: 50%;
margin-left: -half_its_width;
margin-top: -half_his_height;