实现图片居中

1. 1. 方法一：

<style type="text/css">
    *<span>{margin<span>:<span>;padding<span>:<span>;<span>}
    div<span>{
        width<span>:150px<span>;
        height<span>: 100px<span>;
        position<span>: relative<span>;
        border<span>:1px solid #000<span>;
    <span>}
    img <span>{
        width<span>: 50px<span>;
        height<span>: 50px<span>;
        position<span>: absolute<span>;
        top<span>: 50%<span>;
        left<span>: 50%<span>;
        margin-top<span>: -25px<span>; /* 高度的一半 */
        margin-left<span>: -25px<span>; /* 宽度的一半 */
    <span>}
</style>

1. 方法二：

style type="text/css">
    *{margin: 0;padding: 0;}
    div{
        width:150px;
        height: 100px;
        display: table-cell;
        vertical-align: middle;
        text-align: center;
        border:1px solid #000;
    }
    img {
        width: 50px;
        height: 50px;
    }
</style>

原文链接：https://blog.csdn.net/DreamFJ/article/details/68921957

<styletype="text/css"> *{margin:0;padding:0;}div{ width:150px; height:100px; position: relative; border:1px solid #000; }img{ width:50px; height:50px; position: absolute; top:50%; left:50%; margin-top: -25px; /* 高度的一半 */margin-left: -25px; /* 宽度的一半 */}</style>