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

上一篇: div not in the middle with margin 0 auto?

下一篇: How do I align a div in CSS?