CSS 不定寬高居中是前端開發中經常遇到的問題，特別是在處理圖片、視頻等媒體元素時更為常見。那么，如何實現不定寬高元素的居中呢？下面我們來探討兩種常見的方法。 第一種方法：使用transform transform 屬性可以將元素相對其自身的中心點平移、旋轉、縮放等操作。在使用該屬性實現不定寬高元素居中時，我們需要先將元素的左上角定位在可視區域的正中心，再對元素進行平移操作，代碼如下：

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

在這段代碼中，我們使用了絕對定位將元素放置在可視區域的中心，然后通過 transform 屬性進行平移，使元素的中心點與可視區域的中心重合，進而實現了不定寬高元素的居中。 第二種方法：使用flexbox flexbox 是一種強大的布局方式，它可以輕松地處理不定寬高元素的居中問題。使用該方式實現居中時，我們需要將父容器設置為 display: flex，并在其中使用 justify-content 和 align-items 屬性來控制子元素的水平和垂直居中。代碼如下：

.parent {
display: flex;
justify-content: center;
align-items: center;
}
.center {
/* 任意寬高 */
}

在這段代碼中，我們將父容器設置為 flex 布局，使其子元素能夠自動垂直居中，并使用 justify-content 屬性居中子元素。這種方法可適用于多種場景，如多個元素的居中等。 綜上所述，利用 transform 屬性和 flexbox 實現不定寬高元素居中都是可行的方法。具體實現還需根據具體場景進行選擇，以確保達到最佳效果。