@TOC

Suppose the HTML looks like this:

<body>
    <div id="box">
        <div id="content"></div>
    </div>
</body>

Copy the code

1. Compatibility best method IE7 above

body,html { margin:0; width:100%; height:100%; } #box { width:100%; height:100%; Background: rgba (0,0,0,0.7); position:relative; } #content { width:50%; height:50%; background:pink; position:absolute; top:0; right:0; bottom:0; left:0; margin:auto; }Copy the code

2. Transform Offset elements beyond IE8

body,html { margin:0; width:100%; height:100%; } #box { width:100%; height:100%; Background: rgba (0,0,0,0.7); position:relative; } #content{ position:absolute; width:50%; height:50%; background:blue; left:50%; top:50%; transform:translateX(-50%) translateY(-50%); -webkit-transform:translateX(-50%) translateY(-50%); }Copy the code

3. Layout the elastic box model Internet Explorer is not compatible

body,html { margin:0; width:100%; height:100%; } #box { width:100%; height:100%; Background: rgba (0,0,0,0.7); display:box; box-pack:center; box-align:center; display:-webkit-flexbox; -webkit-box-pack:center; -webkit-box-align:center; } #content { width:50%; height:50%; background:blue; }Copy the code

4. The Flex layout is incompatible with IE9

body,html { margin:0; width:100%; height:100%; } #box { width:100%; height:100%; Background: rgba (0,0,0,0.7); display:flex; display:-webkit-flex; justify-content:center; align-items:center; } #content { position:absolute; width:50%; height:50%; background:blue; }Copy the code
Words: there is no such thing as quiet time, but someone is carrying a heavy burden for you