div在设置position为absolute的情况下 如何让里面的内容水平居中显示

Posted 2023-03-21

您好，这个问题有两种情况。
第一种：里面内容元素为块元素，那么将此块元素css设置为：margin:0
auto;
第二种：里面内容元素为行元素，那么将此行元素的父级元素css设置为：text-align:center;
希望能够帮到您。。 参考技术A 内容水平居中显示和设置position为absolute并无太多关系，这种情况下有几种实现方式：
1.
display:
flex
2.
仍然采用position:absolute
3.
margin：
0
auto；
4.
text-align 参考技术B 再加1个div来做
<div
class=div1><div
class=div2>
要居中，并使用position为absolute的内容
</div></div>
---------css-----------
.div1
text-align:
center;
width:
100%;
position:
relative;
overflow:
hidden;
height:
40px;

.div2
position:
absolute;
width:
100%;
bottom:
0;

以上代码是为要遮罩部分头部内容的，并且需要居中显示。 参考技术C 假如div的宽度为200px，那么居中的方式为左浮动50%，然后再margin-left为-100px就可以了。
div
width:200px;
position:absolute;
left：50%；
margin-left:-100px;