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与中间的内容

回答

相关问题