框位置未居中

Question

我试图将一个盒子 200 乘以 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;就足够

了

#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

尝试下面的代码，将#containerdiv 水平居中，.slider-textdiv 水平和垂直居中#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 3

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

使文本居中。您可以使用弹性框。使用显示：flex 将使您能够使用对齐项目和两端对齐内容。使用中心值，它将允许文本在其父文本的中心流动。

Answer 4

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

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

您应该将所有元素的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)

更新了小提琴(对不起，忘记"更新"它)

编辑：我假设你想把它居中到整个屏幕。

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

左边距：-(格宽)/2; 上边距：-(格高)/2;