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
transform
Property
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