Question

我得到了这个codepen，虽然它完美无缺，但我无法弄清楚为什么它不能将文本置于包含框的中间。以下是我的代码，它垂直居中，现在我也希望水平居中。

.container-box p{
  position:absolute;
  margin:auto;
  height:40px;
  background:grey;
  color:white;
  padding:10px;
  box-sizing:border-box;
  top: 0; left: 0; bottom: 0; right: 0;
  display:table;
  vertical-align:center;
}

Answer 1

您需要为width（居中）提供margin: auto属性才能正常工作。

.container-box p {
  position:absolute;
  width: 25%; //add this
  margin:auto;
  ...
}

另一个主要问题是p居中对齐容器（.container-box）而不是图像。 确保图片覆盖整个容器。你可以通过

来做到这一点

.container-box img {
  width: 100%;
}

现在看起来文本位于图像的中心，但在文字中，文本位于容器的中心，并且您将图像扩展到整个容器。

Answer 2

您可以使用定位：

进行此操作

＆＃13;

* {margin: 0; box-sizing: border-box}

.container-box {
  display: inline-block; /* can also use "inline-flex" */
  position: relative; /* since one of the children is positioned absolute */
}

.container-box > img {
  display: block; /* removes bottom margin/whitespace */
  max-width: 100%; /* horizontal responsiveness */
  max-height: 100vh; /* vertical responsiveness */
}

.container-box > p {
  position: absolute; /* positioned relative to its parent */
  top: 50%; /* moved down by 50% of the parents height */
  left: 50%; /* moved right by 50% of the parents width */
  transform: translate(-50%,-50%); /* moved left and up by half of its width and height to achieve the perfect center */
  height: 40px;
  background: Gray;
  color: #fff;
  padding: 10px;
}

＆＃13;

<div class="container-box">
  <img src="https://placeimg.com/640/480/any" alt="">
  <p>This is a temp. Image.</p>
</div>

＆＃13;

Answer 3

 .container-box p{
   position:absolute;
   margin:auto;
   width: 200px;
   ...
 }

同时为图像指定宽度100％。

.container-box img{
  width: 100%;
 }

检查此修改后的版本Codepen

Answer 4

使用左：50％和顶部：50％。我清理了一点CSS

.container-box p{
  position:absolute;
  height:40px;
  background:grey;
  color:white;
  padding:10px;
  box-sizing:border-box;
  display:table;
  left: 50%;
  top: 50%;
}

水平居中绝对元素

4 个答案: