纯css垂直居中汇总

下文用到的例子html为:

<div class="parent">

    <div class="child">
        lorem
    </div>
</div>

单行固定高度

适用场景:

  • 单行文本
  • 定高

在父元素或子元素设置 line-height等于父元素高度即可

.parent {
        height: 300px;
        text-align : center;
    }

    .child {
        /*注意实现垂直居中不能用百分比,因为百分比是相对字体大小而言的*/
        line-height : 300px;
    }

单行高度不固定

适用场景:

  • 父元素需要设置高度,但高度不固定,如百分比的高度
  • 单行文本

以下为固定脚本,即一定要写的

.parent {
        vertical-align : middle;
        text-align : center;
    }

    .parent:after {
        display: inline-block;
        content: '';
        height: 100%;
        width: 0;
        vertical-align : middle;
    }

这里是要根据情况来写的,但是父元素下的单行文本所在元素一定要是内联元素,所以要设置

.child { display: inline; }

这里的思路也很简单,用 after伪类元素撑至父元素高度,但是没文本,宽度也为0,但是它设置了 vertical:middle,那么就会是父元素下的文本与这个伪类元素垂直对齐。

padding设置

适用:

  • 父元素没设定高度
  • 可多行文本

这个实在很简单,父元素设定相同的padding-top,bottom即可

绝对定位垂直水平居中

适用场景:

  • 居中内容需要知道宽高(非定高定宽)
  • gt IE 7
.parent {
        position: relative;
        width: 300px;
        height: 300px;
    }

    .child {
        position: absolute;
        /*必须*/
        top: 0;
        /*必须*/
        bottom: 0;
        /*必须*/
        left: 0;
        /*必须*/
        right: 0;
        /*必须*/
        width: 50 %;
        /*定制*/
        height: 30 %;
        /*定制*/
        margin: auto;
        /*必须*/
    }

绝对定位计算垂直水平居中

前提:

  • 居中的内容需要知道宽高(非定高定宽)
.parent {
        position: relative;
        width: 300px;
        height: 300px;
    }

    .child {
        position: absolute;
        top: 50 %;
        left: 50 %;
        width: 100px;
        height: 200px;
        /*设置为本身宽度的一半*/
        margin - left : - 50px;
        /*设置为本身高度的一半*/
        margin - top : - 100px;
    }

display table法

适用场景:

  • 可多行文本居中
  • 居中内容一定要裹个标签用来设置 table-cell
.parent {
        display: table;
        text-align : center;
    }

    .child {
        display: inline - block;
        /** 这行主要为了应对IE7及以下不支持**/
        display: table-cell;
        vertical-align : middle;
    }

flex方法

适用场景:

  • 现代浏览器,IE10需要加前缀,IE11支持性不太好
  • 可多行内容
.parent {
        display: flex;
        justify-content : center;
        align-items : center;
    }

transform方法

适用场景:

  • 现代浏览器,IE9需要加前缀
.parent {
        position: relative;
    }

    .child {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
    }

说明:

  • 绝对定位是相对于父元素的百分比计算
  • transform是相对于内容自身的宽高计算

float方法

适用:

  • 父元素有设定高度
  • 居中内容有设定高度
  • 居中内容铺满child容器或溢出滚动时,更适用于图片或超多文本
.parent {
        height: 200px;
    }

    .parent:before {
        float: left;
        height: 50%;
        width: 100%;
        margin-bottom : -50px; /**为child的高度一半**/
    }

    .child {
        clear: both;
        height: 100px;
    }

原文出处:微信公众号【pekon K前端】

原文链接:https://mp.weixin.qq.com/s/HGH7-t97zvYMFY41FtSS-A

本文观点不代表Dotnet9立场,转载请联系原作者。

发表评论

登录后才能评论