您现在的位置:首页 >> 前端 >> 内容

常见css布局图片实现垂直居中

时间:2018/3/21 13:35:26 点击:

  核心提示:实现水平居中的方案很多 pimg src=1.jpg alt=haha/pstyle type=text/css*{margin: 0;padding: 0;}p{width:150px;height...

实现水平居中的方案很多

     <p>
        <img src="1.jpg" alt="haha">
    </p>
<style type="text/css">
    *{margin: 0;padding: 0;}
    p{
        width:150px;
        height: 100px;
        display: table-cell;
        vertical-align: middle;
        text-align: center;
        border:1px solid #000;
    }
    img {
        width: 50px;
        height: 50px;
    }
</style>
<style type="text/css">
    *{margin: 0;padding:0;}
    p{
        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>

Tags:常见 见C CS SS 
作者:网络 来源:inyiyi的博客