div不在边缘0自动中间?
我有一个确认框,我想在屏幕中间显示它。
margin 0 auto
不能解决我的问题。
我该如何居中呢?
https://jsfiddle.net/y5u5obL0/
#confirmBox{
position:fixed;
margin:0 auto;
width:500px;
height:150px;
background:#ffffff;
border:1px solid #ddd;
}
这是因为元素是固定的。
你需要添加left: 0;
/ right: 0
为了使元素居中(与margin: 0 auto
组合)。 这样做时,元素在技术上会伸展以填充屏幕,但由于它具有指定的宽度,因此它将被容纳并居中在可用空间内。
更新示例
#confirmBox {
position:fixed;
left: 0;
right: 0;
margin:0 auto;
width:500px;
height:150px;
background:#ffffff;
border:1px solid #ddd;
}
使用以下代码垂直和水平居中放置任何东西,如果要将其从页面流中移除,请相对于绝对值进行更改。 看看演示,看看它在行动
(演示)
HTML
<div class="wrap">
<div class="mycontent">
Hello World!
</div>
</div>
CSS
.wrap {
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
display: inline-block;
max-width: 100%;
max-height: 100%;
}
保证金:0自动; 将不会工作,直到你不会提供左:0; 和右:0
检查工作示例小提琴:https://jsfiddle.net/nileshmahaja/y5u5obL0/1/
CSS
#confirmBox{
position:fixed;
margin:0 auto;
width:500px;
height:150px;
background:#ffffff;
border:1px solid #ddd;
left:0; /* Added Property */
right:0; /* Added Property */
}
链接地址: http://www.djcxy.com/p/75815.html