箱子的位置不居中

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

给出下面的代码尝试，水平和#container水平和垂直集中#container股div和.slider-text股。

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

只是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 3

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

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

然后到中心horizo​​ntaly和verically已知大小的div你#container里面，您只需要针对该分区设置：

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（抱歉忘了“更新”它）

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

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

* { 
 
    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>

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

居中您的文本。您可以使用flexbox。使用display：flex可以让你使用align-items和justify-content。使用中心值，它将允许您的文本在父文件的中心流动。

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

利润率左:-(DIV宽度）/ 2; margin-top :-(div height）/ 2;