Turn: Div+css How to make a small div vertically centered in another big Div

Method 1: Absolute positioning +margin:auto

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

Method 2:display:table-cell

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

Method 3:display:flex

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

Method 4: Absolute positioning +margin

. parent {width:800px;            height:500px;            border:2px solid #000;        position:relative;            }. Child {width:300px;            height:200px;            Margin:auto; position:absolute;/* sets the horizontal and vertical offset of the parent element by 50%, and then moves the child element left half the size according to the actual length */
left:50%;
top:50%;
Margin-left: -150px;
Margin-top: -100px;
background-color:red;
}

Turn: Div+css How to make a small div vertically centered in another big Div