Skip to main content

水平垂直居中方案

以下方案均基于如下布局和基础样式:

<div id="parent">
<div id="children">HZFE</div>
</div>
#parent {
background: red;
height: 600px;
}

#children {
background: blue;
}

flex

适用场景:子元素宽高不固定、子元素宽高固定

#parent {
display: flex;
justify-content: center;
align-items: center;
}

grid

适用场景:子元素宽高不固定、子元素宽高固定

#parent {
display: grid;
justify-content: center;
align-items: center;
}

相对定位

1. 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);
}

2. calc

适用场景:子元素宽高固定

#children {
width: 400px;
height: 300px;
position: relative;
top: calc(50% - 150px);
left: calc(50% - 200px);
}

绝对定位

1. 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);
}

2. calc

适用场景:子元素宽高固定

#parent {
position: relative;
}

#children {
width: 400px;
height: 300px;
position: absolute;
top: calc(50% - 150px);
left: calc(50% - 200px);
}

3. 负外边距

适用场景:子元素宽高固定

#parent {
position: relative;
}

#children {
width: 400px;
height: 300px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -150px;
margin-left: -200px;
}

4. 自动外边距

适用场景:子元素宽高固定

#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;
}
Loading script...