CSS上下居中是我們常常會(huì)用到的一個(gè)技巧，本文將會(huì)詳細(xì)介紹幾種實(shí)現(xiàn)上下居中的方法。

方法一：使用flex布局

.parent {
display: flex;
align-items: center;
justify-content: center;
height: 500px;
}
.child {
width: 200px;
height: 100px;
}

方法二：使用position和transform

.parent {
position: relative;
height: 500px;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 200px;
height: 100px;
}

方法三：使用display和line-height

.parent {
height: 500px;
display: table-cell;
vertical-align: middle;
}
.child {
display: inline-block;
width: 200px;
height: 100px;
line-height: 100px;
}

以上三種方法都能實(shí)現(xiàn)上下居中的效果，但其中方法一最為常用。希望本文能給你提供幫助。