问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

css3怎么让img上下左右居中

头像
keep_M
    47633352

    像下面这个图片，我想让他根据不同宽度和高度都能上下左右居中，要怎么处理

    <div class="thumbnail">
    <a href="###" >
        <img  src="##" alt="...">
    </a>
</div>

    clipboard.png

    css3
    阅读 37.6k
    18 个回答
    得票最新
    头像
    fweaver
      4714
      头像
      mengdu
        2.2k104763

        如果不考虑ie以及其他低版本浏览器

        display:flex;
justify-content:center;
align-items:center;

        这个是最好的方案。
        如果要兼容，我一般做法

        .box{
Text-align:center;
Line-height:盒子高度;

}
        头像
        coachmans
          4.6k21328

          试试看

          transform:translate(-50%,-50%)
          头像
          heminhui
            112

            给div相对定位，给img绝对定位，然后给img元素left：0 right:0 top:0 bottom:0 margin:auto就ok了

            头像
            这是上帝的杰作
              2.2k212

              Css3可以考慮flexbox細節屬性

              Css2樓上有寫可以用:
              1：父級相對定位，子元素絕對定位，並且to,bottom,left,right都為0，且margin:auto。注意:子元素要給寬高;
              2:用table,table-cell,結合vertial-align:middle,text-align:center

              實驗性屬性可以考慮display:grid

              头像
              leeya3719
                132

                display:flex;justify-content:center;align-items:center

                头像
                CoderAce
                  151

                  img是行内块元素，
                  display:inline-block，
                  可以让父元素的高度等于父元素的行高，img再设置，vertical-align:middle
                  一定要确保img是行内块元素，
                  display:table
                  display:table-cell
                  也可以。
                  左右可以直接text-align:center

                  头像
                  已注销
                    35322229

                    给出对应属性的top:50%和left:50%即可

                    头像
                    bingo彬哥
                      2.5k52752
                      头像
                      caryhgq
                        3.5k65484

                        display:flex;

                        头像
                        水墨寒
                          1.1k72636

                          mark 先占位 有空过来答

                          头像
                          驼鹿大仙
                            762

                            给img绝对定位即可，position:absolute在设置top,bottom,left,right的值

                            头像
                            kikong
                              19.1k31320
                              <!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
  
        .container{
            width: 600px;
            border: 1px solid red
        }
        .imgOuterHAlign{
            width: 560px;/*设置和img一样宽*/
            margin: 0 auto
        }
        .imgOuterVAlign{
            line-height: 400px;/*设置和container一样高*/
        }
        .linkImg{
            vertical-align: middle /**垂直对齐*/

        }
    </style>
</head>
<body>

<div class="container">
    <div class="imgOuterHAlign">
        <div class="imgOuterVAlign">
            <a href="#">
                <img src="https://segmentfault.com/img/bVx9Fx" class="linkImg">
            </a>
        </div>
    </div>
</div>

</body>
</html>
                              头像
                              gavin_呆呆
                                1
                                新手上路，请多包涵

                                img{

                                height: 540px;
margin-top: -270px;
position: relative;
top: 50%;
width: 600px;

                                }

                                头像
                                舒紫栋
                                  29
                                  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .imgWrap{
            width:200px;
            height:100px;
            background:pink;
            overflow: hidden;
        }
        .imgWrap .imgModel{
            width:50px;
            height:50px;
            display: block;
            background:red;

          /*父容器宽高一半减去自身的宽高的一半
           *    width:(200/2)-(50/2)
           *    height:(100/2)-(50/2)
           */            
            margin:25px 75px;
        }
    </style>
</head>
<body>
    <div class="imgWrap">
        <a href="#" class="imgModel"></a>
    </div>
</body>
</html>

                                  父容器记得使用overflow属性，否则子元素margin属性会和父容器水平居中。

                                  头像
                                  天叶蓝
                                    1112814

                                    图片加 vertical-align: middle; 父元素加 text-align: center;

                                    头像
                                    mochal
                                      21
                                      新手上路，请多包涵

                                      position:absolute;
                                      left:0;
                                      right:0;
                                      top:0;
                                      bottom:0;
                                      margin:auto;

                                      头像
                                      xxmajt98
                                        63138

                                        .thumbnail a{

                                        display: block;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;

                                        }

                                        撰写回答
                                        你尚未登录，登录后可以
                                        • 和开发者交流问题的细节
                                        • 关注并接收问题和回答的更新提醒
                                        • 参与内容的编辑和改进，让解决方法与时俱进
                                        推荐问题