箱子的位置不居中

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;