Fatal编程技术网
  • html/
  • Html 中间高度为100%的高度和宽度

Html 中间高度为100%的高度和宽度

html css

Html 中间高度为100%的高度和宽度,html,css,Html,Css,我已经找到了很多答案，并尝试了多种不同的解决方案，但都没有成功。有没有人有一个简单的方法 示例图像： 边框应与浏览器边缘的四周相距20px。非常感谢所有能够提供帮助的人。在div上尝试以下css： position: absolute; bottom: 20px; top: 20px; left: 20px; right: 20px; text-align: center; 垂直对齐问题：据我所知，您不能使用垂直对齐：中间在块上。只有知道内容高度（或使用javascript），才能解决此问题

我已经找到了很多答案，并尝试了多种不同的解决方案，但都没有成功。有没有人有一个简单的方法

示例图像：

边框应与浏览器边缘的四周相距
20px
。非常感谢所有能够提供帮助的人。

在div上尝试以下css：

position: absolute;
bottom: 20px;
top: 20px;
left: 20px;
right: 20px;
text-align: center;
垂直对齐问题：据我所知，您不能使用
垂直对齐：中间在块上。只有知道内容高度（或使用javascript），才能解决此问题


您可以使用
填充顶部：50%，但它不是真正的“中间”。我更新了演示，内容也在中间，请看这个


下面是一个内容垂直居中的示例：

HTML


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


​下面是产生以下结果的代码：





编辑（如果内容不止一行，则可选择此选项）

与前面相同的HTML，使用以下CSS（）


这是一种比上面回答的方法更具响应性的方法。我希望有帮助

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>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​




内容
​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​



这里有一个功能性的
这个css也可以用于content div


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




20PX
身体{
背景色：蓝色；}
#试验{
位置：绝对位置；
底部：20px；
右：20px；
顶部：20px；
左：20px；
文本对齐：居中；
背景色：红色；
}
中心文本

他还需要将内容放在中间谢谢这对边框很有效，现在我只需要中间的内容右边框和下边框不在页面上，你必须滚动才能获得它们我删除了我的回复，因为它实际上没有回答你的问题，而这个更好。我将#框改为位置：绝对；顶部：20px；左：20px；右：20px；底部：20px；这很有效，谢谢you@Alfa3eta如果内容只有一行，那么它是一个有效的解决方案，当添加多行时，那么不，它不起作用。问题是您要么必须设置子内容的宽度，要么使用
display:table单元格；垂直对齐：中间对齐属性。有关多行内容的信息，请参见编辑。

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



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



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



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