css不定高使元素水平垂直居中
阿新 • • 發佈：2018-12-20
父元素高度不定，子元素水平垂直居中 html
<div class="parent">
<div class="child">123456</div>
</div>
方法一： css
.parent{ position: relative; height:300px; width: 300px; background: #FD0C70; } .parent .child{ position: absolute; top: 50%; left: 50%; color: #fff; transform: translate(-50%, -50%); }
此方法可用於場景：div.parent高度一定，子元素未知寬高而需要垂直水平居中的情況。
法二：
css
.parent {
justify-content: center;
align-items: center;
display: -webkit-flex;
height: 100%;
}
此方法可用於場景：div.parent 設定背景圖片且高度根據圖片比例而定，子元素垂直水平居中。
另外補充子元素已知寬高的設定垂直水平居中的一種方法：
.parent{ position: relative; height:300px; width: 300px; background: #FD0C70; } .parent .child{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; background: #ffffff; width: 100px; height: 100px; }