盒子位置不居中

Question

我正在尝试将一个框居中放置 200 x 200。我已经尝试使用 left:50% top:50% 等，但这在某种程度上并没有真正起作用。

我创建了一个 fiddle 来重现我的问题：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;就够了

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

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

Answer 2

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

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

然后在你的 #container 中水平和垂直居中 known-size 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（抱歉忘了"update"了）

编辑：我假设你想让它在整个屏幕上居中。

Answer 3

你的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 4

#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 5

* {
  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 居中。

使文本居中。你可以使用弹性盒子。使用 display:flex 将使您能够使用 align-items 和 justify-content。使用 center 的值，它将允许您的文本在其父项的中心流动。

Answer 6

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

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

<div id ="container">

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

如果有帮助请告诉我。

Answer 7

假设您希望 X 和 Y 都居中，到目前为止您是对的，但是有一些变化。将此用于您的 .slider-text class:

.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 是正确的。 Relative 会使它从其自然位置移动 X 个像素，而 absolute 会将它定位在特定位置，相对于最近的带有 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宽度)/2; margin-top:-(div身高)/2;

盒子位置不居中

Box position not centering

html

css

centering