div not in the middle with margin 0 auto?

I have a confirm box and I want to show it in the middle of my screen.

margin 0 auto does not solve my problem.

How can I center it?

https://jsfiddle.net/y5u5obL0/

#confirmBox{
 position:fixed;
 margin:0 auto;
 width:500px;
 height:150px;
 background:#ffffff;
 border:1px solid #ddd;
}

---

It's because the element is fixed.

You need to add left: 0; / right: 0 in order for the element to be centered (in combination with margin: 0 auto ). In doing so, the element technically stretches to fill the screen, but since it has a width specified, it will be contained and centered within the available space.

Updated Example

#confirmBox {
    position:fixed;
    left: 0;
    right: 0;
    margin:0 auto;
    width:500px;
    height:150px;
    background:#ffffff;
    border:1px solid #ddd;
}

---

Use the following code to vertically and horizontally center anything, change relative to absolute if you want to remove it from the page flow. Check out the demo to see it in action

(Demo)

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%;
}

---

Margin: 0 auto; will not work until you will not provide left:0; and right:0

check fiddle for working example :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/75816.html

上一篇: 滚动时将div粘贴到中心

下一篇: div不在边缘0自动中间？