Absolute centered div Quirks between IE and Chrome

Question

Absolute centered div Quirks between IE and Chrome

I have a script with CSS and HTML that successfully centers the div on the page and does not contain fixed widths, just percentages.

http://jsfiddle.net/h9ZY4/

<html>

<head>

<title>Centered Div</title>

<style type="text/css">

body{
    background-color: #3d3d3d;
    color: #ffffff;
    font-family: Arial;
}

.QuoteContainer{
    /* Contains Quote Name, Quote Text */   
    height: 50%;
    width: 80%;     
    margin: auto;
    position:absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    display: table;
}
.QuoteWrap{
    display: table-cell;
    vertical-align: middle;
}
.QuoteTop{
    /* Quote Text */
    background-color: #515151;
    background-image: url('Quotation.jpg');
    background-repeat: no-repeat;
    padding: 20px; 
    font-size: 18pt;  
}
.QuoteBottom{
    /* Quote Name */
    background-color: #2e2e2e;
    padding-left: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
    font-weight: bold;
}
</style>

</head>

<body>

<div class="QuoteContainer">
    <div class="QuoteWrap">
        <div class="QuoteTop">Vivamus feugiat hendrerit tortor. In hac habitasse platea dictumst. Vivamus eu rhoncus nisi. Nunc metus mi, condimentum eget mauris nec, ornare ullamcorper nunc. Curabitur luctus augue id enim consequat ornare. Sed enim justo, fringilla ac ultricies a, sodales eu massa?</div>
        <div class="QuoteBottom">Michael Smith</div>
    </div>
</div>

</body>

</html>

The problem is that it displays correctly in Chrome, but not in IE.

Does anyone have any ideas how I can get IE to display the same?

+4

html css google-chrome internet-explorer

Smithty May 16, '14 at 20:50

source share

1 answer

G-Cyr · Accepted Answer · 2014-05-16T21:08:04+0000

The display is useless as soon as you use float or absolute position.

, XY IE11, display;table . , :). DEMO

body{
  background-color: #3d3d3d;
  color: #ffffff;
  font-family: Arial;
}
html, body ,
.QuoteContainer{
  height:100%;/* inherits window's/parent height */
  width:100%;/* inherits window's/parent width */
  margin:0;
}
.QuoteContainer {   
    display: table;
}
.QuoteWrap {
  display: table-cell;
  vertical-align: middle;
}
.QuoteTop{
  /* Quote text */
  background-color: #515151;
  background-image: url('Quotation.jpg');
  background-repeat: no-repeat;
  padding: 20px; 
  font-size: 18pt;  
  width: 80%;  
  margin:auto;
}
.QuoteBottom{
  background-color: #2e2e2e;
  padding: 10px 20px;
  padding-bottom: 10px;
  font-weight: bold;
  width: 80%;  
  margin:auto;
}

Absolute centered div Quirks between IE and Chrome

More articles: