CODEWITHSUNDEEP
htmlcss
Gabriela Dias
Gabriela Dias

Reputation: 349

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

Upvotes: 0

Views: 388

Answers (3)

user4639281
user4639281

Reputation:

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

Upvotes: 1

Nilesh Mahajan
Nilesh Mahajan

Reputation: 3516

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

Upvotes: 0

Josh Crozier
Josh Crozier

Reputation: 241118

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

Upvotes: 2

Related Questions