不定宽高容器 垂直水平居中

1.
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; }
2.

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:pink; left:50%; top:50%;transform:translateX(-50%) translateY(-50%);-webkit-transform:translateX(-50%) translateY(-50%); }

3.
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:pink; }