如何垂直居中一个<img> 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            /* 父级元素不可以是body */
            div{
                height: 500px;
                width: 500px;
                border: #000000 1px solid;
                display: table-cell;
                text-align: center;
                vertical-align: middle;
            }
        </style>
    </head>
    <body>
        <div id="">
        <img src="si/1.jpg" width="200px" height="200px">
            
        </div>
    </body>
</html>

img 的父级元素不可以是body，要不然没有效果。

思想就是把div转成table-cell,在用table的方法设置其居中的方法

posted @ 2020-09-07 08:44  陈小浩  阅读(148)  评论(0)  编辑  收藏  举报