垂直居中解决方案总结

周羊羊

点这个链接可以直接看到效果:http://www.zhouyangyang.com/c...

这是公用样式

.outer {
    width: 150px;
    height: 200px;
    background: pink;
    border: 1px solid pink;
}
.inner {
    background: #77BFCD;
}

1,负margin
父元素position relative,子元素position absolute,top 50%,margin-top 为负的元素height/2。
缺点:子元素高度固定的时候才能用,而且计算麻烦。

<style type="text/css">
    .outer1 {
        position: relative;
    }
    
    .inner1 {
        position: absolute;
        top: 50%;
        margin-top: -40px;
        height: 80px;
    }
</style>
<div class="outer outer1">
    <div class="inner inner1">
        <p>first line</p>
        <p>second line</p>
    </div>
</div>

2,css3 calc()
跟上面没啥区别,也是要子元素高度固定,手动除以2。
不过可以少写一行margin-top。

<style type="text/css">
    .outer2 {
        position: relative;
    }
    
    .inner2 {
        position: absolute;
        top: calc(50% - 40px);
        height: 80px;
    }
</style>
<div class="outer outer2">
    <div class="inner inner2">
        <p>first line</p>
        <p>second line</p>
    </div>
</div>

3,translateY
百分比形式的margin-top是相对于元素包含块的宽度的,所以上面的方法都要手动除以2。
而 translateX translateY 的百分比是相对于元素自身的宽高,这个方法可以用于子元素高度不确定时,而且不用手动除以2,比上面几个方便了很多。
有些浏览器下,transform后如果宽高的像素点不是整数,显示会模糊,可以用transform-style:preserve-3d修复。

<style type="text/css">
    .outer3 {
        position: relative;
    }
    
    .inner3 {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }
</style>
<div class="outer outer3">
    <div class="inner inner3">
        <p>first line</p>
        <p>second line</p>
    </div>
</div>

4,margin auto,top right left bottom 全为0
可以实现上下左右居中,超级方便,这也是我在项目里用得最多的。不过这个只能在元素设置了宽高的时候用。

<style type="text/css">
    .outer4 {
        position: relative;
    }
    
    .inner4 {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: auto;
        width: 100px;
        height: 80px;
    }
</style>
<div class="outer outer4">
    <div class="inner inner4">
        <p>first line</p>
        <p>second line</p>
    </div>
</div>

上面是基于绝对定位的解决方案,还有其他的。
5,表格布局
父元素display table-cell,virticl-align middle,子元素display table。

<style type="text/css">
    .outer5 {
        display: table-cell;
        vertical-align: middle;
    }
    
    .inner5 {
        display: table;
    }
</style>
<div class="outer outer5">
    <div class="inner inner5">
        <p>first line</p>
        <p>second line</p>
    </div>
</div>

6,行内块方法
将子元素设置display:inline-block,vetical-align:middle,父元素行高等于高度,
缺点是只能用在父元素高度固定的条件下。

<style type="text/css">
    .outer6 {
        line-height: 200px;
    }
    
    .inner6 {
        display: inline-block;
        vertical-align: middle;
        height: 80px;
        line-height: 1;
    }
</style>
<div class="outer outer6">
    <div class="inner inner6">
        <p>first line</p>
        <p>second line</p>
    </div>
</div>

7,另一种行内块方法
给父元素一个:before伪子元素,让这个伪元素height:100%,然后让这个伪子元素和真正的子元素都display:inline-block vetical-align:middle。

<style type="text/css">
    .outer7:before {
        content: '';
        display: inline-block;
        height: 100%;
        vertical-align: middle;
    }
    
    .inner7 {
        display: inline-block;
        vertical-align: middle;
    }
</style>
<div class="outer outer7">
    <div class="inner inner7">
        <p>first line</p>
        <p>second line</p>
    </div>
</div>
阅读 831

一只可爱的羊(๑•.•๑)

744 声望
17 粉丝
0 条评论

一只可爱的羊(๑•.•๑)

744 声望
17 粉丝
文章目录
宣传栏