Horizontal Center and Vertical Center solution for HTML

Center horizontally: Set a width for the Div, and then add the margin:0 Auto property

div{    width:200px;    margin:0 auto;  }

Center the absolutely positioned DIV

div {    position: absolute;    width: 300px;    height: 300px;    margin: auto;    top: 0;    left: 0;    bottom: 0;    right: 0;    background-color: pink; /* 方便看效果 */ }

Horizontal vertical Center A layer that determines the width and width of the container 500 high 300, sets the margin of the layer

 div {    position: relative;     /* 相对定位或绝对定位均可 */    width:500px;    height:300px;    top: 50%;    left: 50%;    margin: -150px 0 0 -250px;      /* 外边距为自身宽高的一半 */    background-color: pink;     /* 方便看效果 */  }

Horizontal vertical Center Two unknown container width and height, using transformProperty

div {    position: absolute;     /* 相对定位或绝对定位均可 */    width:500px;    height:300px;    top: 50%;    left: 50%;    transform: translate(-50%, -50%);    background-color: pink;     /* 方便看效果 */ }

Horizontal vertical Center Three using flex layouts, you should consider compatibility when you actually use them

 .container {    display: flex;    align-items: center;        /* 垂直居中 */    justify-content: center;    /* 水平居中 */ } .container div {    width: 100px;    height: 100px;    background-color: pink;     /* 方便看效果 */ }  

Horizontal Center and Vertical Center solution for HTML