一个盒子垂直水平居中的几种方法

一个盒子垂直水平居中的几种方法总结

效果展示：

HTML代码：

<div id="container">
    <div id="box"></div>
</div>

css基本样式：

#container {
   
     width: 100%;
     height: 600px;
     border: 1px solid black;
 }
 #box {
   
     width: 100px;
     height: 100px;
     background: red;
 }

方法一：定位 absolute + 负margin

#container {
   
     width: 100%;
     height: 600px;
     border: 1px solid black;
     
     position: relative;
 }
 #box {
   
     width: 100px;
     height