我想在窗口的中心放置一个div(with position:absolute;)元素。但我在这样做时遇到了问题,因为宽度未知。
我尝试了以下CSS代码,但它需要调整,因为宽度是响应的。
.center {
left: 50%;
bottom: 5px;
}
我怎样才能做到这一点?
我想在窗口的中心放置一个div(with position:absolute;)元素。但我在这样做时遇到了问题,因为宽度未知。
我尝试了以下CSS代码,但它需要调整,因为宽度是响应的。
.center {
left: 50%;
bottom: 5px;
}
我怎样才能做到这一点?
当前回答
HTML格式:
<div id='parent'>
<div id='child'></div>
</div>
CSS:
#parent {
display: table;
}
#child {
display: table-cell;
vertical-align: middle;
}
我知道我已经给出了答案,我之前的答案和其他人的答案都很好。但我在过去使用过这个,它在某些浏览器和某些情况下效果更好。所以我想我也会给出这个答案。我没有“编辑”我之前的答案并添加它,因为我觉得这是一个完全独立的答案,我提供的两个答案并不相关。
其他回答
Flexbox可用于对绝对定位的div。
display: flex;
align-items: center;
justify-content: center;
.相对{宽度:275px;高度:200px;背景:皇家蓝;颜色:白色;边距:自动;位置:相对;}.绝对块{位置:绝对;高度:36px;背景:橙色;填充:0px 10px;底部:-5%;边框:1px实心黑色;}.居中文本{显示:柔性;对齐内容:中心;对齐项目:居中;盒子阴影:1px 2px 10px 2px rgba(0、0、0和0.3);}<div class=“relative center text”>相对块(Relative Block)绝对块</div></div>
您可以将图像放置在一个div中,添加一个div id,并让该div的CSS具有文本align:center:
HTML格式:
<div id="intro_img">
<img src="???" alt="???">
</div>
CSS:
#intro_img {
text-align: center;
}
由于我不想更改容器/包装器元素的样式,所以这些解决方案都不适合我。这段代码对我有用:
position: absolute;
left: 50%;
margin-left: -50px;
top: 50%;
margin-top: -50px;
这是我想出的一个技巧,让DIV精确地浮在页面的中心。当然,它确实很难看,但它适用于所有浏览器。
点和虚线
<div style="border: 5 dashed red;position:fixed;top:0;bottom:0;left:0;right:0;padding:5">
<table style="position:fixed;" width="100%" height="100%">
<tr>
<td style="width:50%"></td>
<td style="text-align:center">
<div style="width:200;border: 5 dashed green;padding:10">
Perfectly Centered Content
</div>
</td>
<td style="width:50%"></td>
</tr>
</table>
</div>
清洁工
哇,那五年刚刚过去,不是吗?
<div style="position:fixed;top:0px;bottom:0px;left:0px;right:0px;padding:5px">
<table style="position:fixed" width="100%" height="100%">
<tr>
<td style="width:50%"></td>
<td style="text-align:center">
<div style="padding:10px">
<img src="Happy.PM.png">
<h2>Stays in the Middle</h2>
</div>
</td>
<td style="width:50%"></td>
</tr>
</table>
</div>
这对我有用:
#内容{位置:绝对;左:0;右:0;左边距:自动;右边距:自动;宽度:100px;/*需要特定的值才能工作*/}<body><div><div id=“content”>我是内容</div></div></body>