Question

我在相对文本换行中有绝对定位文本，我希望它垂直和水平居中。问题是，文本不会居中，因为它的宽度和高度会自动填充容器。如何解决这个问题，以便文本可以在div中居中，包括垂直和水平？

HTML

<div class="text-wrap">
  <h3>Hello</h3>
</div>

CSS

.text-wrap {
  height: 200px;
  width: 120px;
  position: relative;
  border: 1px solid black;
}

.text-wrap h3 {
  position: absolute;
  margin: auto;
  left:0;
  right:0;
  top:0;
  bottom: 0;
}

Answer 1

更改绝对元素的CSS规则，使其居中（将其左上角移动到容器的中心，然后将其向上移动并向左移动一半自己的宽度/高度，从而使其居中）< / p>

.text-wrap {
  height: 200px;
  width: 120px;
  position: relative;
  border: 1px solid black;
}

.text-wrap h3 {
  position: absolute;
  margin: 0;
  padding: 0;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  
}

<div class="text-wrap">
  <h3>Hello</h3>
</div>

Answer 2

试试这个

.text-wrap {
  height: 200px;
  width: 120px;
  position: relative;
  border: 1px solid black;
}

.text-wrap h3 {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

文本换行div中的绝对定位文本的宽度和高度保持在换行的100％

2 个答案: