CSS中對(duì)于元素的上下居中是一個(gè)很常見(jiàn)的需求，特別是在設(shè)計(jì)頁(yè)面時(shí)。下面介紹一種基于CSS+select實(shí)現(xiàn)的上下居中方法。

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

首先，我們需要給包含居中元素的父元素設(shè)置一個(gè)高度，因?yàn)橹挥性诖_定了父元素的高度之后，才能在其中水平和垂直居中子元素。

接下來(lái)，使用flex布局方式，將子元素水平和垂直都居中。具體來(lái)說(shuō)，使用justify-content屬性將子元素的水平方向居中，align-items屬性將子元素的垂直方向居中。

<div class="parent">
<div class="child">
<p>要居中顯示的內(nèi)容</p>
</div>
</div>

最后，給包含子元素的父元素和子元素分別添加一個(gè)class，以便在CSS中定義相應(yīng)樣式。

這種基于CSS+select實(shí)現(xiàn)的上下居中方法在實(shí)現(xiàn)簡(jiǎn)單，易于掌握，尤其適用于網(wǎng)頁(yè)中的彈出框、登錄窗口等需要居中顯示的元素。