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;
}

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>

Answer 2

    .info { /* Background (div)*/
        background-color: red;
        height: 10em;
        width: 50em;
        position: relative;
    }
    .info-text { /* Text (span) */
        font-size: 6em;
        position: absolute;
        display: block;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    <div class="info">
      <div class="info-text">Text</div>
    </div>

Answer 3

u可以通过flex和align-items:center使用justify-content:space-between向父级显示还有其他方法，但我更喜欢这种方法！

*{
  margin:0;
  padding:0;
}
.center-text{
  width:300px;
  height:150px;
  background:red;
  display:flex;
  align-items:center;
  justify-content:space-around;
}
p{
  font-size:30px;
}

<div class="center-text">
  <p>Hello World</p>
</div>

Answer 4

您根本不需要绝对定位，只需使用 flexbox 将其水平居中并在容器底部对齐文本，请使用 text-align：center 和相对位置。通过相对位置，您可以使用 bottom属性

将其轻松移出容器

示例：

.info { /* Background (div)*/
    position:absolute;
    top:0;
    bottom:0;
    margin:auto;
    background-color: red;
    height: 10em;
    width: 100%;
    display:flex;
    justify-content:center;
    align-items:flex-end;
    z-index:99;
}
.info-text { /* Text (span) */
    font-size: 6em;
    position:relative;
    bottom:-0.5em;
}

<div class="info">
  <div class="info-text">Text</div>
</div>

如果您也希望文本也垂直居中，则可以设置align-items：center。

示例

.info { /* Background (div)*/
    position:absolute;
    top:0;
    bottom:0;
    margin:auto;
    background-color: red;
    height: 10em;
    width: 100%;
    display:flex;
    justify-content:center;
    align-items:center;
    z-index:99;
}
.info-text { /* Text (span) */
    font-size: 6em;
    position:relative;
}

<div class="info">
  <div class="info-text">Text</div>
</div>

Answer 5

您可以通过将 .info

中的line-height设置为 .info-

在您的情况下，我将单位更改为 p x，如您所见， .info 具有height: 100px;-在 .info文本

中添加了line-height: 100px;

只要您保持line-height与height相同，它将处于完美的中心。

.info { /* Background (div)*/
  background-color: red;
  height: 100px;
  width: 500px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -25px 0 0 -250px;
  text-align: center;
}

.info-text { /* Text (span) */
  position: relative;
  font-size: 60px;
  line-height: 100px;
  display: inline-block;
}

<div class="info">
  <span class="info-text">CRUGG</span>
</div>

文字不是在Div中完全居中吗？

5 个答案: