图片垂直居中显示-总结

第1种，居中效果
<div class="box">
<div class="center">居中效果</div>
</div>

/*第1种，垂直居中效果 绝对定位 */
.box{
       width: 200px;height: 200px;border: 1px solid #ccc;
       position: relative;
  }
.center{
            width: 50%;
            height: 50%;
            background: gray;
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            margin: auto;
    }

/* 绝对定位加 transform */
        .demo1 {
            width: 200px;
            height: 200px;
            border: 1px solid blue;
            position: relative;
        }
        .demo1 .child {
            width: 50%;
            height: 50%;
            background: gray;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        /* flex 布局 */
        .demo3 {
            width: 200px;
            height: 200px;
            border: 1px solid black;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .demo3 .child {
            width: 50%;
            height: 50%;
            background: gray;
        }

第2种图片居中

/*第2种 图片垂直居中*/
/* span是辅助元素 vertical-align这个属性的特点,它是相对兄弟级行高（line-height）来定位*/

.box2{
    width: 350px;height: 350px;border: 1px solid #F22727;
    text-align: center;
}
.center2{ vertical-align: middle;}
.block{ line-height: 350px;}/*跟父级一样高*/

第3种，居中效果父元素使用display: table; 子元素display: table-cell;
<div class="box3">
<span class="center3"><img src="yz_p5.jpeg" alt=""/></span>
</div>

/*第3种，居中效果*/
.box3{
    width: 350px;height: 350px;border: 1px solid #F22727;display: table;text-align: center;
}
.center3{
    display: table-cell;vertical-align: middle;
}

第4种，居中效果
<div class="box4">
<img class="center4" src="yz_p5.jpeg" alt=""/>
</div>

/*第4种，居中效果  根据父元素来计算*/
.box4{
    width:300px;height: 300px;border: 1px solid #F22727;
}
.center4{
    width: 200px;height: 200px;position: relative;left: 16%;top: 19%;
}

css清除浮动方法

.clearfix:after {
            clear: both;
            content: '.';
            display: block;
            overflow: hidden;
            visibility: hidden;
            line-height: 0;
            width: 0;
            height: 0;
        }

.box:after{content: ".";display: block;height: 0;clear: both;overflow: hidden;visibility: hidden;}

高度塌陷：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>高度塌陷</title>
    <style type="text/css">
    *{margin: 0;padding: 0;}
    ul,li{list-style: none;}
    a{text-decoration: none;}
    .box{width: 800px;min-height: 300px;background: blue;overflow: hidden;}
    .left{width: 300px;height: 500px; background: red;float: left;}
    .right{width: 400px;height: 600px; background: black;float: left;}

    </style>
</head>
<body>
    <div class="box">
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>
</html>

posted @ 2016-12-12 22:42 云悠阅读(1049) 评论(0) 收藏举报

刷新页面返回顶部

云悠

图片垂直居中显示-总结

公告