CSS中實(shí)現(xiàn)屏幕的水平與垂直居中是常見的布局常見問(wèn)題，在此我們簡(jiǎn)單介紹幾種常見的方法。

1. 使用display:flex

.container {
display: flex;
justify-content: center;
align-items: center;
}

利用強(qiáng)大的flex布局，可以輕松實(shí)現(xiàn)屏幕的水平與垂直居中。

2. 使用position和transform

.container {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}

通過(guò)設(shè)置絕對(duì)定位的left和top為50%，然后再用transform屬性調(diào)整位置，也可以實(shí)現(xiàn)水平與垂直的居中效果。

3. 使用calc函數(shù)

.container {
position: relative;
}
.inner {
position: absolute;
top: calc(50% - 30px);
left: calc(50% - 50px);
}

使用calc函數(shù)來(lái)計(jì)算元素的位置，可以輕松地實(shí)現(xiàn)水平和垂直居中，但需要指定元素的寬和高。

總結(jié)

以上介紹了三種常見的CSS實(shí)現(xiàn)屏幕水平與垂直居中的方法，在不同的場(chǎng)景下選擇不同的方法，可以讓我們更好的實(shí)現(xiàn)布局效果。