css 垂直水平置中好方法 - TerryLee7788/JS_test GitHub Wiki

My example:

html code:

<div class="data-img">
  <img src="your-image.jpg" />
</div>

css code

.data-img{
    width: 500px;
    height: 500px;
}
/* 重點在這裡 */
.data-img:before {
    content: '';
    display: inline-block;
    width: 0;
    height: 100%;
    vertical-align: middle;
}
.data-img img {
    vertical-align: middle;
}

(?) 如果遇到外面的.data-img 會有動態變動的狀況時, 等高度確定了之後再用javascript 動態加入一個class name 即可.

Reference doc:

學習的筆記

⚠️ **GitHub.com Fallback** ⚠️