CSS 中，有時(shí)候我們需要將一個(gè)元素居中，但是這個(gè)元素的寬高是未知的。這時(shí)候，我們可以使用以下三種方法來實(shí)現(xiàn)居中效果。 方法一： 使用 position 和 transform 屬性。可以將需要居中的元素放在父元素中，然后設(shè)置 position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);。這樣就可以將元素在水平和垂直方向上居中。

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

方法二： 使用 flex 布局。將父元素設(shè)置為 display: flex; justify-content: center; align-items: center;，即可實(shí)現(xiàn)居中效果。這種方法可以適用于不同的寬高比的元素。

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

方法三： 使用 table 布局。將父元素設(shè)置為 display: table;，并且子元素設(shè)置為 display: table-cell; vertical-align: middle;，即可實(shí)現(xiàn)居中效果。這種方法不適用于浮動元素。

.parent {
display: table;
}
.child {
display: table-cell;
vertical-align: middle;
}

總之，以上三種方法都可以實(shí)現(xiàn)未知寬高元素的居中效果。我們可以根據(jù)具體情況選擇不同的方法使用。