Horizontal center if not familiar with the box model, then true is not well understood, in fact, control other properties to allow content within the border of being controlled in the middle of the parent container on the line, the most classic is to use {margin: 0 auto} , and control 0 their upper and lower outer border of automatically adjusting the width of the left and right sides of the parent container is the same value in the middle of the contents of the card on it.
<style> .parent{ display: block; width: 200px; border: 1px solid; } .child{ display: block; margin: 0 auto; width: 100px; height: 50px; background-color: aqua; } </style> <body> <div class="parent"> <div class="child"></div> </div> </body>
SUMMARY vertical alignment there is a lot of ways, there is provided by the use position: absolute and then to move the container to move the half height of 50% of the distance of the parent container, the negative like can be solved by a set margin-top, or set display: inline-block; and vertical-align: middle; can do, as well as set the position for the table styles, many ways.
<style> *{padding: 0;margin:0;} .box{ position: absolute; top: 50%; left: 50%; margin-top: -50px; margin-left: -50px; width: 100px; height: 100px; border: 1px solid red; } </style> <body> <div class="box"> </div> </body>