div not in the middle with margin 0 auto?

Question

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?

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

you can see solution in [enter link description here][1] [1]: http://stackoverflow.com/questions/2005954/center-element-with-positionfixed — fateme, Apr 29 '15 at 19:07
possible duplicate of [Why can't I center with margin: 0 auto?](http://stackoverflow.com/questions/963636/why-cant-i-center-with-margin-0-auto) — mdaniel, Apr 29 '15 at 19:10

Josh Crozier · Accepted Answer · 2015-04-29T18:50:46.840

2

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

edited Apr 29 '15 at 18:50

answered Apr 29 '15 at 18:49

Josh Crozier

233,099
56
391
304

Margin: 0 auto; will not work until you will not provide left:0; and right:0 – Nilesh Mahajan Apr 29 '15 at 18:50
@NileshMahajan Why do you say this won't work, and then post the same exact solution *after* me? It doesn't make sense. – Josh Crozier Apr 29 '15 at 18:53
I accidentally commented on your answer, actually I was trying to post a comment below the question, your answer is correct . – Nilesh Mahajan Apr 29 '15 at 18:54
sorry for bothering you. – Nilesh Mahajan Apr 29 '15 at 18:55
@NileshMahajan No problem at all.. that comment was just confusing, that's all. – Josh Crozier Apr 29 '15 at 18:56

score 1 · Answer 2 · answered Apr 29 '15 at 19:07

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

score 0 · Answer 3 · answered Apr 29 '15 at 18:51

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 */
}

div not in the middle with margin 0 auto?

3 Answers3