Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to center a “position: absolute” element in IE 9,10,11

Tags:

How to center a “position: absolute” element in IE 9, 10, 11, my example do not work in Internet Explorer. Also this "position: absolute; left:50%; margin-left:-20px;" ,manner will not suit me, as the layout is responsive.

.box{
    position: absolute;
    top: 150px;
    right: 0;   
    left: 0;
    margin: auto;       
}

<body>
<div class="container">
<div class="box">
</div>
</div>
</body>
like image 649
user3351236 Avatar asked Mar 26 '14 07:03

user3351236


1 Answers

<body>
<div class="container">
<div class="box">
</div>
</div>
</body>

CSS

.box{
    position: absolute;
    top:0;
    right: 0;   
    left: 0;
    bottom:0;   //specify all including bottom:0
    margin: auto;
    height:200px;
    width:200px;       
}

DEMO

like image 120
Sajad Karuthedath Avatar answered Oct 12 '22 02:10

Sajad Karuthedath