div中的div上下居中

方法1：

1 2 3 4 5 6 7 8 9 10 11 12 13 14

.parent {           width:800px;           height:500px;           border:2px solid #000;           position:relative; }  .child {             width:200px;             height:200px;             margin: auto;               position: absolute;               top: 0; left: 0; bottom: 0; right: 0;              background-color: red; }

方法2：

1 2 3 4 5 6 7 8 9 10 11 12 13 14

.parent {             width:800px;             height:500px;             border:2px solid #000;             display:table-cell;             vertical-align:middle;             text-align: center;         }         .child {             width:200px;             height:200px;             display:inline-block;             background-color: red;         }

方法3：

1 2 3 4 5 6 7 8 9 10 11 12 13

.parent {             width:800px;             height:500px;             border:2px solid #000;             display:flex;             justify-content:center;             align-items:center;         }         .child {             width:200px;             height:200px;             background-color: red;         }

方法4：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

.parent {             width:800px;             height:500px;             border:2px solid #000;             position:relative;         }         .child {             width:300px;             height:200px;             margin:auto;             position:absolute;/*设定水平和垂直偏移父元素的50%， 再根据实际长度将子元素上左挪回一半大小*/             left:50%;             top:50%;             margin-left: -150px;             margin-top:-100px;             background-color: red;         }