图片水平垂直置中

最新推荐文章于 2025-01-15 19:30:00 发布

原创最新推荐文章于 2025-01-15 19:30:00 发布 · 200 阅读

0 ·

CC 4.0 BY-SA版权

Div / Css / XML / HTML5 专栏收录该内容

177 篇文章

订阅专栏

<div class='box'>
  <img src='http://placeimg.com/320/180/nature'/>
</div>
<div class='box'>
  <img src='http://placeimg.com/180/320/nature'/>
</div>
<div class='box'>
  <img src='http://placeimg.com/320/320/nature'/>
</div>
<div class='box'>
  <img src='http://placeimg.com/100/100/nature'/>
</div>

分別是4個box，作為img的容器，裡面各有一張圖片

接下來是CSS的部分

.box {
    position: relative;
    background: gray;
    height: 200px;
    width: 200px;
    float: left;
    margin: 10px;
}
.box img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    max - height: 100 % ;
    max - width: 100 % ;
}

設定box的寬高皆為200px以及position為relative

然後設定img的position為absolute，接著是top, right, bottom, left皆為0

讓圖片的空間為整個box，且疊在box的上面

然後設定margin為auto，讓其位置上下左右置中

最後是max-height與max-width為100%，避免圖片超出box的大小

透過這樣的設定，就可以達成垂直水平置中，且不需要額外的HTML TAG

缺點：Windows Phone無法正常使用

来源：http://shinychang.net/article/52de790fdca870921b3a4b98