我想在窗口的中心放置一个div(with position:absolute;)元素。但我在这样做时遇到了问题,因为宽度未知。
我尝试了以下CSS代码,但它需要调整,因为宽度是响应的。
.center {
left: 50%;
bottom: 5px;
}
我怎样才能做到这一点?
我想在窗口的中心放置一个div(with position:absolute;)元素。但我在这样做时遇到了问题,因为宽度未知。
我尝试了以下CSS代码,但它需要调整,因为宽度是响应的。
.center {
left: 50%;
bottom: 5px;
}
我怎样才能做到这一点?
当前回答
.center {
position: absolute
left: 50%;
bottom: 5px;
}
.center:before {
content: '';
display: inline-block;
margin-left: -50%;
}
其他回答
您可以将图像放置在一个div中,添加一个div id,并让该div的CSS具有文本align:center:
HTML格式:
<div id="intro_img">
<img src="???" alt="???">
</div>
CSS:
#intro_img {
text-align: center;
}
在寻找解决方案时,我得到了前面的答案,可以将内容以Matthias Weiler的答案为中心,但使用文本对齐:
#content{
position: absolute;
left: 0;
right: 0;
text-align: center;
}
它与谷歌Chrome和Firefox配合使用。
我只是想补充一句,如果有人想用一个div标记来完成,那么这里是解决方法:
宽度为900px。
#styleName {
position: absolute;
left: 50%;
width: 900px;
margin-left: -450px;
}
在这种情况下,应该事先知道宽度。
<div style='position:绝对;左:50%;顶部:50%;转换:转换(-50%,-50%)'>此文本居中。</div>
这将使div中的所有对象居中,位置类型为static或relative。
只需使用一个新的div包装您的内容并使用display flex,然后使用align-items:center;并调整内容:中心;看看。。。
<div class="firstPageContainer">
<div class="firstPageContainer__center"></div>
</div>
.firstPageContainer{
display: flex;
width: 1000px;
height: 1000px;
justify-content: center;
align-items: center;
background-color: #FF8527;
}
.firstPageContainer__center{
position:absolute;
width: 50px;
height: 50px;
background-color: #3A4147;
}