Question

我试图将一个200的盒子居中。我尝试使用left:50% top:50%等，但这在某种程度上并没有真正起作用。

我创建了一个小提琴来重现我的问题：https://jsfiddle.net/8k9o9Lvv/2/

我也尝试将文本从顶部居中，使用text-align:center，这也无效。

为什么这不起作用？

HTML

<div id ="container">
  <div class="slider-text">
    <h2>Test</h2>
  </div>
</div>

CSS

#container{
  width:100%;
}

.slider-text {
  text-align:center;
  position:relative;
  height:200px;
  width: 200px;
  border-left:1px solid red;
  border-right:1px solid red;
  border-top:1px solid red;
  border-bottom:1px solid red;
  top:50%;
  left:50%;
  right:50%;
}

Answer 1

只需margin:0px auto;就够了

＆＃13;

#container {
  width: 100%;
}

.slider-text {
  text-align: center;
  margin:0px auto;
  height: 200px;
  width: 200px;
  border-left: 1px solid red;
  border-right: 1px solid red;
  border-top: 1px solid red;
  border-bottom: 1px solid red;
}

＆＃13;

<div id="container">
  <div class="slider-text">
    <h2>Test
    </h2>
  </div>
</div>

＆＃13;

Answer 2

* {
  margin: 0;
  padding: 0;
}

#container{
  position:relative;
  width:100%;
  height: 100vh;
}

.slider-text {
  position: absolute;
  text-align:center;
  height:200px;
  width: 200px;
  border-left:1px solid red;
  border-right:1px solid red;
  border-top:1px solid red;
  border-bottom:1px solid red;
  top:50%;
  left:50%;
  transform: translateX(-50%) translateY(-50%);
  right:50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

<div id ="container">
  <div class="slider-text">
    <h2>Test</h2>
  </div>
</div>

您需要设置容器的高度。在这种情况下，我使用了100vh，它等于1个视口高度。 transform: translateX(-50%) translateY(-50%); top: 50%; left: 50% .slider-text将使KeyStore成为焦点。

使文字居中。您可以使用flexbox。使用display：flex将使您能够使用align-items和justify-content。使用center的值，它将允许您的文本在其父级的中心流动。

Answer 3

尝试下面的代码，将#container div水平居中，.slider-text div水平和垂直居中#container。

＆＃13;

#container{
  width:100%;
}

.slider-text {
  text-align:center;
  position:relative;
  height:200px;
  width: 200px;
  border:1px solid red; /* Creates a border around entire element */
  margin: auto; /* Centers horizontally */
}

/* This is to center the text vertically within its parent, */
/* remove it if you don't want to do that */
.slider-text h2 {
  text-align:center;
  position: absolute; /* position: relative; works too */
  width: 100%;
  top: 30%;
  left: 0%;
}

＆＃13;

<div id ="container">

  <div class="slider-text">
    <h2>Test</h2>
  </div>
  
</div>

＆＃13;

如果有帮助，请告诉我。

Answer 4

您应该将height:100%设置为容器内的所有元素。这意味着：

html, body, #container
{
  height:100%;
}

然后，在你的#container中，以水平和中心的方式将已知大小的div放在中心，你只需要设置该div：

left:50%;
top:50%;

和

margin-left:(MINUS whatever is the half of your div width) margin-top:(MINUS whatever is the half of your div height)

UPDATED FIDDLE（抱歉忘了＆＃34;更新＆＃34;它）

编辑：我假设你想把它放在整个屏幕上。

Answer 5

您的HTML

 <div id ="container">
  <div class="slider-text">
    <h2>Test</h2>
  </div>
 </div>

修改CSS

#container{
  width:100%;
}
.slider-text {
  position:relative;
  height:200px;
  width: 200px;
  border:1px solid red;
  margin: 0 auto;
}
.slider-text h2 {
  width: 100%;
  text-align: center;
}

Answer 6

#container{
  width:100%;
  position: relative;
}

.slider-text {
  text-align:center;
  height:200px;
  width: 200px;
  border-left:1px solid red;
  border-right:1px solid red;
  border-top:1px solid red;
  border-bottom:1px solid red;
  position: relative;
}

/*since slider-text has a fixed height and width, a simple math would do*/

.slider-text h2 {
 margin-top: 90px;
  }

<div id ="container">
<div class="slider-text"><h2>Test
</h2></div>
</div>

只需一个简单的计算即可

Answer 7

假设您想要将X和Y都居中，那么到目前为止你是对的，但是有一些变化。将此用于.slider-text课程：

.slider-text {
  text-align:center;
  position:absolute; /* Relative was wrong */
  height:200px;
  width: 200px;
  border-left:1px solid red;
  border-right:1px solid red;
  border-top:1px solid red;
  border-bottom:1px solid red;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
}

在这种情况下，相对定位不正确。 absolute是正确的。相对会使其从自然位置移动X个像素，而绝对会将其定位在特定位置，相对于其上有position: relative的最近父级。

变换基本上与负边距相同，但如果框的大小发生变化，则无需更改边距：）

如果您有任何问题，请与我们联系。

Answer 8

这是css代码：

.slider-text {
  text-align:center;
  position:absolute;
  height:200px;
  width: 200px;
  border-left:1px solid red;
  border-right:1px solid red;
  border-top:1px solid red;
  border-bottom:1px solid red;
  top:50%;
  left:50%;
  margin-left:-100px;
  margin-top:-100px;
}

margin-left :-( div width）/ 2; margin-top :-( div height）/ 2;

盒子位置不居中

8 个答案: