.box-wrap{width: 1000px; margin: 0 auto;}
p{color: red;}
.containar1{width: 100%; height: 100px; border: 3px solid #ddd; text-align: center;} 
.box{background: yellow; display: inline-block;}
.container2{width: 100%; height: 300px; border: 3px solid #ddd}
.box2{width: 200px; height: 200px; background: green; margin: 50px auto;}
.container3{width: 100%; height: 300px; border: 3px solid #ddd; text-align: center;}
.box3{width: 150px; background: greenyellow; display: inline-block;}

.container4{width: 100%; height: 300px; border: 3px solid #ddd; text-align: center; display: flex; justify-content: center; }
.box4{width: 150px; height: 150px; background: #ff0; margin-left: 5px;}

.container5{width: 100%; border: 3px solid #ddd; padding: 50px 0 ; }
.container6{width: 100%; border: 3px solid #ddd; height: 200px; line-height: 200px;}

.container7{width: 100%; border: 3px solid #ddd; height: 200px; display: table;}
.child{display: table-cell; vertical-align: middle;}

.container8{width: 100%; border: 3px solid #ddd; height: 200px; display: flex; justify-content: center; flex-direction: column;}

.containar9{width: 100%; border: 3px solid #ddd; height: 200px; position: relative;} 
.box8{width: 100px; height: 100px; background: #ff0 ; position:absolute; top: 50%; margin-top: -50px;}

.containar10{width: 100%; height: 500px; border: 3px solid #ddd;  position: relative;} 
.box9{width: 200px; height: 100px; background: #ff0 ; position:absolute; top: 50%; transform: translateY(-50%);}

.containar11{width: 100%; height: 500px; border: 3px solid #ddd; display: flex; flex-direction: column; justify-content: center; } 
.box11{width: 200px; height: 100px;  background: #ff0 ; margin-bottom: 5px;}

.containar12{width: 100%; height: 500px; border: 3px solid #ddd; position: relative;}
.box12{width: 100px; height: 100px; background-color: yellowgreen; left: 50%; top: 50%; position: absolute;transform: translate(-50%,-50%);}