css3 display:flex;(flex佈局)+img標籤在div中水平垂直居中
阿新 • • 發佈:2018-12-04
img標籤在div中水平垂直居中--兩種實現方式
第一種方式: text-align:center; vertical-align:middle;
div{ text-align: center; vertical-align:middle;width: 400px; height: 400px; border: 1px solid #000; } img{vertical-align: middle} span{height: 100%;vertical-align: middle;display: inline-block} <div style=""> <span></span> <img src="ad-pic.png" alt="" style="border: 1px solid #000;"> </div>
第二種方式 通過設定img為絕對定位,處於垂直和水平50%,然後平移自身寬高的50%
div{ position: relative; width: 400px; height: 400px; border: 1px solid #000; } img{ position: absolute; top:50%; left:50%; transform: translate(-50%,-50%); }