3行Css實現div水平、垂直居中


這里寫圖片描述

HTML部分:

<div class="container">
<!-- This is your content ... -->
</div>

Css部分:

就像下面,只需要給.container三行css規則就可以使它在水平方向和垂直方向均處於居中。

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

兼容性

這個方法適用於所有現代瀏覽器- IE10 +,Chrome瀏覽器,Firefox和Safari(與-webkit- 前綴)。完整的兼容性列表如下:
這里寫圖片描述

這里寫圖片描述

一個具體實例


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
  © 2014-2022 ITdaan.com 联系我们: