居中問題

好的，所以我剛剛開始了一個網站的基本模板，並且我已經遇到了一個集中問題。居中問題

我有一個大箱子，我想覆蓋網站的大部分，每邊都有一個小房間，我只是希望它在網站中居中。

問題是，我將位置設置爲相對，並且東西消失，我將其設置爲絕對，並且顯示事物但不是當然中心。我只是想知道爲什麼當我把它設置爲相對的時候盒子消失了，它應該是相對於身體的。

這裏的所有代碼，它不是就像我剛開始這個模板

HTML：

<div class="bigbox"> 

</div>

CSS：

* { 
    margin: 0px; 
    padding: 0px; 
} 

body{ 
    background-color:#212121; 
} 

.bigbox{ 
    background-color:red; 
    height:90%; 
    width:90%; 
    margin: 0 auto; 
    position:relative; 
    z-index:1; 
    float:left; 
}

感謝您抽空看看，我」 M確定這是一個遲鈍的簡單修復

來源

2016-02-17 Gage Lovett

這是爲什麼越來越downvoted？我是這個網站的新手，但我認爲這是一個獲得幫助的地方？如果我的格式不對，請告訴我，以便我可以修復它我寧願收到我需要做的這些工作，然後得到downvoted的知識？ –

你可以實現你的各種方式想：

垂直高度（VH單元）：https://jsfiddle.net/arthurcamara/bjhrz9n9/

* 
 
{ 
 
    margin: 0px; 
 
    padding: 0px; 
 
} 
 

 
body{ 
 
    background-color:#212121; 
 

 
} 
 

 
.bigbox{ 
 
    background-color:red; 
 
    height:90vh; 
 
    width:90%; 
 
    margin: 5vh auto; 
 
}

<div class="bigbox"></div>

絕對positioniong：https://jsfiddle.net/arthurcamara/bjhrz9n9/1/

body{ 
 
    background-color:#212121; 
 

 
} 
 

 
.bigbox{ 
 
    background-color:red; 
 
    position: absolute; 
 
    top: 5%; 
 
    right: 5%; 
 
    left: 5%; 
 
    bottom: 5%; 
 
}

<div class="bigbox"></div>

和我最喜歡的Flexbox的：https://jsfiddle.net/arthurcamara/bjhrz9n9/2/

body{ 
 
    margin: 0px; 
 
    padding: 0px; 
 
    height: 100vh; 
 
    background-color:#212121; 
 
    
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
} 
 

 
.bigbox{ 
 
    background-color:red; 
 
    width: 90%; 
 
    height: 90%; 
 
}

<div class="bigbox"></div>

來源

2016-02-17 00:22:30

我想你的問題是百分比高度結合你身體未知的身高。你應該在下面的示例中的高度補充人體，如：發生

html, body { 
    height: 100%; 
}

Working JFiddle

來源

2016-02-17 00:10:42

感謝，沒有意識到身體標籤需要的高度或寬度值我想我認爲他們只是默認填充他們正在坐的任何分辨率。 –

默認情況下身體始終具有其中的元素的大小。身高百分比要求身體具有100％的身高。很高興幫助。 –

更新，這沒有奏效，我將高度和寬度值應用於身體，仍然沒有出現大的盒子div。 –

的問題，因爲盒沒有固定的高度。所以，你需要爲body和html將高度設置爲100%

* { 
 
    margin: 0px; 
 
    padding: 0px; 
 
} 
 
html { 
 
    height: 100%; 
 
} 
 
body { 
 
    background-color: #212121; 
 
    height: 100%; 
 
} 
 
.bigbox { 
 
    background-color: red; 
 
    height: 90%; 
 
    width: 90%; 
 
    margin: 0 auto; 
 
    position: relative; 
 
    z-index: 1; 
 
    float: left; 
 
}

<div class="bigbox"> 
 

 
</div>

來源

2016-02-17 00:12:39

謝謝，這工作。我想這是愚蠢的假設HTML和身體標籤默認填滿屏幕作爲滾動是一件事情。謝謝！ –

@GageLovett你只需從'.bigbox'中刪除'float：left'。這樣做後，框應水平居中。 –

首先登場的寬度添加到div。你可以使用任何格式px,%,vw等。

div{ 
    width: 80%; 
    margin: 0 auto; 
}

來源

2016-02-17 00:14:30 Pratikshya

下應該給你你在找什麼。您可以通過更改html，body高度百分比和.bigbox邊距來調整邊框。

html, body { 
 
    height: 98%; 
 
} 
 

 
body{ 
 
    background-color:#212121; 
 

 
} 
 

 

 
.bigbox{ 
 
    background-color:red; 
 
    height: 100%; 
 
    margin: 15px 5px; 
 
    position: relative; 
 
}

<div class="bigbox"> 
 

 
</div>

來源

2016-02-17 00:31:31 Gremash

回答

相關問題