I am currently attempting to center (both vertically and horizontally) elements via a CSS grid. After some research, it seems IE11 supports css grid via different syntax than more up to date browsers (edge, safari, chrome, etc). I am using the display:-ms-grid syntax and this is putting my elements in the top left of the screen instead of centering them as I'd like. Note the posted example does work as expected with other browsers.
<div style="height:100%;display:grid;display:-ms-grid;">
<div style="margin:auto" align="center">
<img id="logo" alt="Logo" style="width:250px;margin-top:-5%" src="data:image/svg+xml;base64,xxxxxxxxxxxxx">
<div style="margin-top:2%;" class="loader"></div>
</div>
</div>
How can I overcome the centering issue for IE11?
Update: I've been able to center it vertically but not horizontally so far. This is where I'm currently at:
<div style="height:100%;display:grid;display:-ms-grid;-ms-grid-columns:2fr 2fr 2fr;">
<div style="margin:auto;-ms-grid-column:2;" align="center">
<img id="logo" alt="Logo" style="width:250px;margin-top:-5%" src="data:image/svg+xml;base64,xxxxxxxxxxxxx">
<div style="margin-top:2%;" class="loader"></div>
</div>
</div>
Looks like I found a working solution to support this in IE 10/11. Basically to define 3 columns and 3 rows for the -ms-grid by using -ms-grid-columns and -ms-grid-rows and then specify that my content I want centered should be in column 2 and row 2 (the middle) by using -ms-grid-column and -ms-grid-row. Solution as follows:
<div style="height:100%;display:grid;display:-ms-grid;-ms-grid-columns:2fr 2fr 2fr;-ms-grid-rows: 2fr 2fr 2fr;">
<div style="margin:auto;-ms-grid-column:2;-ms-grid-row:2;" align="center">
<img id="logo" alt="Logo" style="width:250px;margin-top:-5%" src="data:image/svg+xml;base64,xxxxxxxxxxxxx">
<div style="margin-top:2%;" class="loader"></div>
</div>
</div>