Question

我想垂直和水平对齐，容器的高度和宽度将根据其他外部因素进行修正。

我该怎么做？

我尝试过使用flex

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

但它摆脱了我的水平对齐

Answer 1

实际上，有multiple ways来实现垂直对齐，这里有一个：

＆＃13;

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
}

＆＃13;

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

＆＃13;

Answer 2

找到了解决方案！

在div父母身上：

position:relative;

对一个孩子：

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

垂直对齐具有固定高度的div中的内联块

2 个答案: