html - 为什么是top :50% in css not working?

Question

我正在制作一个网站，我正在尝试垂直居中:

 position: absolute;
 width:1200px;
 height:600px;
 top: 50%;
 left: 50%;
 margin-left: -600px;

我的 HTML 是单个 div

Answer 1

使用位置 - 需要静态高度

i{
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  position: absolute;
  top: 50%;
  left: 50%;
}

<i>center</i>

编辑:使用 Flex (2021-10-19)

i {
  display: flex;
  align-items: center; /* vertical centering if flex-direction: row */
  justify-content: center; /* horizontal centering if flex-direction: row */

  /* extra styles */
  background-color: limeGreen;
  min-height: 160px;
}

<i>center</i>

enter code here