Option 1: Transforms
Parent element - relative positioning
position: relative;Child element - absolute positioning
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);Option 2: Flexible layout
Parent element:
display: flex;
justify-content: center; /*子元素水平居中*/
align-items: center; /*子元素垂直居中*/Option 3: Know the height and width of the element
Parent element - relative positioning
position: relative;Child element - absolute positioning
#div{
background-color:#6699FF;
width:200px;
height:200px;
position: absolute; /*父元素需要相对定位*/
top: 50%;
left: 50%;
margin-top:-100px ; /*二分之一的height，width*/
margin-left: -100px;
}Option 4: Height and width of unknown elements
Parent element - relative positioning
position: relative;Child element - absolute positioning
#div{
background-color: #6699FF;
margin:auto;
position: absolute; /*父元素需要相对定位*/
left: 0;
top: 0;
right: 0;
bottom: 0;
}