（1）第一種：用vertical-align

<div class="method1"><span class="tiptop"></span><img class="test" src="img/Dota2.jpg" alt="dota2"> </div><style> .method1{text-align:center; } /*vertical-align:middle 是依賴div內(nèi)子元素最高的行高來實(shí)現(xiàn)對某元素居中的，而我們只需要建立一個(gè)新元素，給他加上inline-block屬性 再把他高度設(shè)置為100%就行了,在下面的<img>設(shè)置vertical-align就生效了*/ .tiptop{height:100%;display:inline-block;vertical-align:middle; } img{vertical-align:middle; } </style>

?

（2）第二種：flex布局（注意瀏覽器兼容性）

<div class="method2"><img src="img_p1_title.png"> </div><style> .method2 {display: flex;justify-content: center; //彈性盒子對象在主軸上的對齊方式align-items: center; //定義flex子項(xiàng)在flex容器的當(dāng)前行的側(cè)軸（縱軸）方向上的對齊方式。background-color:#00a0e9;height:200px; } .method2 img {width:20px;height:30px;background-color:#0A58A0; } </style>

?

（3）position:absolute;絕對定位方式

<div class="method3"><span>第三種方法</span> </div><style> .method3 {width:100%;height: 200px;font-size: 18px;position: relative;background-color:#00a2d4; } .method3 span {width:100px;height:100px;background-color:#00ACED;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);} </style>

?

（4）使用display:table-cell配合vertical-align:center（淘寶也是這樣用的）

<div class="method4"><span>第四種方法</span> </div><style> .method4 {width: 200px;height: 200px;vertical-align: middle;display: table-cell; /*只支持IE8+及現(xiàn)代瀏覽器，與position:absolute;或float:left;屬性盡量不一起用*/text-align: center;background-color:#00ACED; } .method4 span{width:100px;height:100px;background-color:#0A58A0; } </style>

?

?

簡單易懂吧，點(diǎn)個(gè)贊

總結(jié)

以上是生活随笔為你收集整理的让行内元素（如图片）在div中水平垂直居中 （干货）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。