flex
适用场景：子元素宽高不固定、子元素宽高固定
#parent {
display: flex;
justify-content: center;
align-items: center;
}grid
适用场景：子元素宽高不固定、子元素宽高固定
#parent {
display: grid;
justify-content: center;
align-items: center;
}#parent {
display: grid;
place-items: center;
}相对定位
- transform 适用场景：子元素宽高不固定、子元素宽高固定
#children {
display: inline-block;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}适用场景：子元素宽高固定
#children {
width: 400px;
height: 300px;
position: relative;
top: 50%;
left: 50%;
transform: translate(-200px, -150px);
}- calc 适用场景：子元素宽高固定
#children {
width: 400px;
height: 300px;
position: relative;
top: calc(50% - 150px);
left: calc(50% - 200px);
}绝对定位
- transform 适用场景：子元素宽高不固定、子元素宽高固定
#parent {
position: relative;
}
#children {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}适用场景：子元素宽高固定
#parent {
position: relative;
}
#children {
width: 400px;
height: 300px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-200px, -150px);
}- calc 适用场景：子元素宽高固定
#parent {
position: relative;
}
#children {
width: 400px;
height: 300px;
position: absolute;
top: calc(50% - 150px);
left: calc(50% - 200px);
}- 负外边距 适用场景：子元素宽高固定
#parent {
position: relative;
}
#children {
width: 400px;
height: 300px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -150px;
margin-left: -200px;
}- 自动外边距 适用场景：子元素宽高固定
#parent {
position: relative;
}
#children {
width: 400px;
height: 300px;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}table-cell
适用场景：子元素宽高不固定、子元素宽高固定
#parent {
width: 800px;
display: table-cell;
text-align: center;
vertical-align: middle;
}
#children {
display: inline-block;
}line-height
前提：父元素高度固定
适用场景：子元素宽高不固定、子元素宽高固定
#parent {
line-height: 600px;
text-align: center;
}
#children {
line-height: 1.5;
display: inline-block;
vertical-align: middle;
}