div中position:absolute 和margin :0 auto 同时存在,不能水平居中_百度...

发布网友发布时间：2022-04-23 07:54

共3个回答

懂视网时间：2022-04-21 06:17

这是我的CSS代码
#header {
width: 90%;
height: 50px;
background-color: orange;
overflow: auto;
position:fixed;
margin:auto;
z-index: 1;
}

图中的橙色块怎么也居中不了
我尝试过修改代码的次序，也试过不要overflow，z-index等代码，还是没有解决问题
希望各位帮忙解决一下，谢谢！

回复讨论(解决方案)

贴你完整的html和css

First html

-------------------------------------------------------------------------------------
div {
border-radius: 5px;
}

#header {
width: 90%;
height: 50px;
background-color: orange;
overflow: auto;
margin: auto;
position: fixed;
z-index: 1;
}

.left {
width: 25%;
height: 360px;
background-color: gold;
margin-top: 70px;
margin-left: 5%;
position: relative;
display: inline-block;
}

.right {
width: 60%;
height: 360px;
background-color: #A9A9A9;
margin-top: 70px;
margin-right: 5%;
position: relative;
display: inline-block;
}

#footer {
width: 90%;
height: 50px;
background-color: #00FF00;
margin: auto;
margin-top: 20px;
position: relative;
clear: both;
}

贴你完整的html和css

改成
#header {
width: 90%;
height: 50px;
background-color: orange;
overflow: auto;
margin: auto;
position: fixed;
z-index: 1;
left:0px;right:0px;
}
即可

如果完全居中，你还可以加上
html,body{text-align:center}

确实可行，不过我想请教一下，
text-align不是对文字进行居中处理的吗？

热心网友时间：2022-04-21 03:25

肯定不行了啊，绝对定位以后就脱离了父级盒子，只能以父级为参考进行定位，你可以理解为绝对定位以后就浮在了父级上面，所以margin中auto就没有了参考值，如果绝对定位以后还想居中，可以left：50%；margin-left：负的盒子宽度的一半即可。追问谢谢，你的回答让我对position 又深入了解了一些

热心网友时间：2022-04-21 04:43

设置的auto值是针对的上下文。而绝对定位触发了bfc，bfc布局导致元素脱离了父级盒子（即上下文），此时margin中的auto就没有了参考值。

全部栏目

div中position:absolute 和margin :0 auto 同时存在,不能水平居中_百度...

回复讨论(解决方案)