html - 文本没有在 Div 中完全居中？

Question

我对 CSS 很陌生，并查看了一些关于如何在 div 中居中文本的指南，但现在它并不完全，但几乎居中......

图片：https ://cdn.discordapp.com/attachments/554447633197039627/595281754135199754/unknown.png

CSS：

.info { /* Background (div)*/
    background-color: red;
    height: 10em;
    width: 50em;
    position: absolute;
    left: 50%;
    top: 50%;
    margin:-5em 0 0 -25em;
    text-align: center;
}
.info-text { /* Text (span) */
    font-size: 6em;
    display: inline-block;
    vertical-align: middle;
}

标签： htmlcss

Answer 1

您可以使用下面的 css 垂直和水平居中

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

下面是工作片段

.parent {
  background: red;
  height: 100vh
}

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 23px;
  color: #fff
}

<div class="parent">
  <div class="center">Vertical and horizontal center</div>
</div>