100％的高度和寬度DIV與中間的內容

我已經搜索了很多答案，並嘗試了多個民族不同的解決方案，但都沒有工作。有沒有人有這樣做的簡單方法？100％的高度和寬度DIV與中間的內容

實施例圖像：

content in the middle

邊界意味着是從20px在所有側面上的瀏覽器的邊緣移開。大力感謝任何能夠提供幫助的人。

2012-11-13 user1134176

下面是與內容的樣本垂直居中：

HTML

<div id="box"> 
    <div id="content"> 
     Content 
    </div> 
</div>

CSS

#box { 
    width: 200px; 
    height: 200px; 
    border: solid 5px #CCC; 
    margin: 20px; 
    position:relative 
} 
#content { 
    position:absolute; 
    top: 50%; 
    width: 100%; 
    margin-top:-10px; /* Should be half of font-size */ 
    font-size: 20px; 
    text-align: center; 
    color: red; 
    font-family: "Helvetica", "Lucida Sans", "Lucida Sans Unicode", "Luxi Sans", Tahoma, sans-serif; 
}

下面是example碼產生以下結果：

Centered content in div

EDIT（備選如果含量超過一行）

相同的HTML作爲前使用以下CSS（demo code）。

#box { 
    width: 200px; 
    height: 200px; 
    border: solid 5px #CCC; 
    margin: 20px; 
} 
#content { 
    width: 200px; 
    height: 200px; 
    display: table-cell; 
    vertical-align: middle; 
    text-align: center; 

    color: red; 
    font-size: 20px; 
    font-family: "Helvetica", "Lucida Sans", "Lucida Sans Unicode", "Luxi Sans", Tahoma, sans-serif; 
}

Centered three lines content

來源

2012-11-13 13:33:17

我改變#box位置：絕對; top：20px; left：20px; right：20px; bottom：20px;那可以，謝謝 – user1134176

這不是最好的解決方案。看到這個：http://jsfiddle.net/Kf9NP/1/ – Alfa3eta

@ Alfa3eta如果內容只有一行，那麼這是一個工作的解決方案，當添加多行時，則不行，這是行不通的。問題是你要麼設置子內容的寬度，要麼使用'display：table-cell; vertical-align：middle;'屬性。對於多行內容，請參閱編輯。 –

嘗試在DIV這個CSS：

position: absolute; 
bottom: 20px; 
top: 20px; 
left: 20px; 
right: 20px; 
text-align: center;

垂直對齊的問題：據我所知，你不能在一個塊上使用vertical-align: middle;。只有知道內容高度（或使用javascript），才能解決問題。

您可以使用padding-top: 50%;，但它不是真正的「中間」。

來源

2012-11-13 13:21:08 Magus

這是演示：http://jsfiddle.net/d22gs/2/ – user197508

他還需要內容是中間 – Alfa3eta

感謝，對於邊境工作的，現在我只需要在內容中間 – user1134176

我更新的演示，在中間的內容也，請參閱本Demo

div{ 
position:absolute; 
text-align:center; 
width:100%; 
height:100%; 
bottom: 20px; 
top: 20px; 
left: 20px; 
right: 20px; 
padding:50% 0; 
}

來源

2012-11-13 13:33:08 user197508

這有點辦法多一點反應比一個以上的回答。我希望它能幫助

CSS

#wrapper 
{ 
    position:absolute; 
    width:100%; 
    height:100%; 
    border:20px solid #F82; 
} 
#content 
{ 
    position:relative; 
    margin-left:auto; 
    margin-right:auto; 
    height:20%; 
    width:20%; 
    top:40%; 
    color:#E22; 
    font-size:40pt; 
}

HTML

<div id="wrapper"> 
    <div id="content">Content</div> 
</div>

這裏有一個功能fiddle

來源

2012-11-13 13:33:28

右邊框和底邊框不在頁面中，您必須滾動以獲取它們 – user1134176

我刪除了我的回覆，因爲它實際上沒有回答您的問題，而且這個更好。 –

這個CSS也可以爲內容-DIV工作

position:absolute; 
margin-left: 20%; 
width: 60% (100%-margin-left*2);

來源

2012-11-13 13:37:18 Vogel612

<html> 
<head> 
    <title>20PX</title> 
<style type="text/css"> 
body{ 
background-color: blue;} 
#test { 
position: absolute; 
bottom: 20px; 
right: 20px; 
top: 20px; 
left: 20px; 
text-align: center; 
background-color: red; 
} 
</style> 
</head> 
<body> 
    <div id="test"> 
    center text 
    </div> 
</body> 
</html>

來源

2012-11-13 14:07:18 mtt2p

100％的高度和寬度DIV與中間的內容

回答

相關問題