CODEWITHSUNDEEP
css
user3351236
user3351236

Reputation: 2538

CSS - How to center Absolute Position div with max width in IE9,10,11

I need to center absolute position div that has max-width.

Here is an example. https://jsfiddle.net/allegrissimo123/3VHuK/1/

.mess{
    text-align: center;
    display: inline-block;
    margin: 0 auto;
    background: #212121;
    color: #FFFFFF;
    margin-bottom: 50px;    
    max-width: 350px;       
    position: absolute;
    top: 40px;
    left: 0px;
    right: 0px;
    z-index: 1000;
}

I test this in in IE9,10,11 but it does not work.

Upvotes: 12

Views: 12367

Answers (4)

karan3112
karan3112

Reputation: 1867

Try this updated css. This will center align an absolute div vertically and horizontally.

CSS

.mess{
    max-width: 350px;
    max-height: 100px;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom:0px;
    margin:auto;
}

DEMO

Upvotes: -1

Suresh Ponnukalai
Suresh Ponnukalai

Reputation: 13998

Assign width for the class.

.mess{
text-align: center;
display: inline-block;
margin: 0 auto;
background: #212121;
color: #FFFFFF;
margin-bottom: 50px;    
max-width: 350px;       
position: absolute;
top: 40px;
left: 0px;
right: 0px;
z-index: 1000;
width:100%; /* add this */
}

DEMO

Upvotes: 28

Kapil Kumar
Kapil Kumar

Reputation: 1

This will put your div in the center(Vertically and Horizontally). You don't have to provide margin in this case. The below code can be applied to any div regardless of it's width. Make sure the parent div should have position:relative or absolute or fixed;.

    .mess{
     /*your other properties here*/
    position: absolute;
    top:50%;
    left:50%;
    -webkit-transform:translate(-50%,-50%);
    -ms-transform:translate(-50%,-50%);
    transform: translate(-50%, -50%);
    }

Upvotes: 1

lopandpe
lopandpe

Reputation: 523

Also, tested in IE8:

.mess{
   text-align: center;
   display: inline-block;
   margin: 0 auto;
   background: #212121;
   color: #FFFFFF;
   margin-bottom: 50px; 
   max-width: 350px;        
   position: absolute; 
   top: 50%; 
   left: 50%; 
   -webkit-transform:translate(-50%,-50%);
   -ms-transform:translate(-50%,-50%);
   transform:translate(-50%,-50%);
   z-index: 1000;
}

Upvotes: 0

Related Questions