html - 以固定高度垂直对齐 div 中的内联 block

Question

CodePen

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

我该怎么做？

我试过使用 flex

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

但它摆脱了我的水平对齐方式

Answer 1

其实有multiple ways要实现垂直对齐，这里是一个:

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>