css中元素垂直居中的n种方法

元素垂直居中的n种方法

本文章收集了多种实现居中布局的方法,并且按照实现的时间线,从css2到css3的各种解决方案,从代码量有少到多的排序来一一说明每种布局方法的实现方式,通过阅读此文章能够让你解决平时的开发中遇到的各种布局问题。

使用line-height实现单行文本垂直居中

line-height:用于设置多行元素的空间量,如多行文本的间距。对于块级元素,它指定元素行盒(line boxes)的最小高度。对于非替代的 inline 元素,它用于计算行盒(line box)的高度。

.box-1{
    height: 50px;
    line-height: 50px;
}
<div class="box box-1">
    这是要垂直居中的内容。
</div>

查看案例: https://codepen.io/qwguo88/full/dyYvBQv

使用inline-block元素和vertical-align特性实现垂直居中

此方法不限制元素的宽高,兼容性好

  1. vertical-align:用来指定行内元素(inline)或表格单元格(table-cell)元素的垂直对齐方式。
<div class="box">
    <div class="content">
        这是要垂直居中的内容。
    </div>
</div>
.box{
  text-align: center;
  letter-spacing: -.3em;
}
.box::before{
  content: ‘‘;
  height: 100%;
  width: 1px;
  margin-right: -1px;
  display:inline-block;
  vertical-align: middle;
}
.content{
  display:inline-block;
  vertical-align: middle;
  letter-spacing: normal;
}

查看案例: https://codepen.io/qwguo88/full/KKdmvdj

上面的案例通过利用display:inline-block的高度100%于父级高度,再利用vertical-aling:middle垂直居中属性,让行内块级元素剧中与父级。在元素设置成行内块级元素的时候代码中如果元素后边有空格,可以通过设置父级元素letter-spacing:-.3em,然后在通过居中元素还原文字间隔,或者通过设置父级的font-size:0;也可以取消空格的间距。其中红色竖线是通过父元素的伪类设置的。

使用表格单元格和vertical-align特性实现垂直居中

<div class="box">
  <div class="content">
    这是要垂直居中的内容。
  </div>
</div>
.box{
  display: table-cell;
  vertical-align: middle;
  text-align:center;
}
.content{
  display:inline-block;
}

此方法需要设置父级的父级为diaplay:table;,并且设置父元素:display:table-cell,然后在设置vertical-align:middle,实现元素居中,但是此方法子元素需要是行内元素,和行内块级元素;

查看案例: https://codepen.io/qwguo88/full/qBOmPaM

使用绝对定位absolute和margin负值

此方法用于固定宽高的元素,或者通过js获取不固定元素宽高

<div class="box">
  <div class="content">
    这是要垂直居中的内容。
  </div>
</div>
.box{
  position: relative;
}
.content{
  position: absolute;
  width: 100px;
  height: 100px;
  left: 50%;
  top: 50%;
  margin: -50px 0 0 -50px;
}

此方法需要设置元素依照父级绝对定位,left和top都按照父元素50%定位。且需要知道要居中元素的宽高,也可以通过javascript获取元素的宽高,并且设置margin的上和左为负值元素宽高的一半;

使用绝对定位absolute和margin:auto

此方法需要设置居中元素为固定宽高

<div class="box">
  <div class="content">
    这是要垂直居中的内容。
  </div>
</div>
.box{
  position: relative;
}
.content{
  position: absolute;
  width: 100px;
  height: 100px;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

此方法利用margin: auto;居中特性加决定定位上下左右为0来实现元素居中,此方法需要固定元素的宽高,并且决对定位于父元素。兼容ie8以上浏览器.

使用绝对定位absolute和css3的transform:translate属性

<div class="box">
  <div class="content">
    这是要垂直居中的内容。
  </div>
</div>
.box{
  position: relative;
}
.content{
  position: absolute;
  left: 50%;
  top: 50%;
  transform:translate(-50%, -50%);
}

此方法利用了css3的新特性元素偏移属性,先让元素绝对定位于父元素的右、上的50%,然后通过transform:translate(-50%, -50%);设置元素按照自身的右上便宜50%实现居中,此方法不用的优点:不用固定元素宽高,缺点:兼容需要支持css3的浏览器。

案例说明: https://codepen.io/qwguo88/full/jObmLaN

使用flex实现居中

通过flex弹性布局有好多种方式可以居中对齐,可以给父级单独设置,或者父级子级结合设置实现

html代码结构完全一样:

<div class="box">
    <div class="content">
      这是要垂直居中的内容。
    </div>
</div>

方法1:

.box{
    display: flex;
    justify-content: center;
    align-items: center;
}

最简单的方法,只通过父级设置,把父元素设置成弹性很模型,然后设置父元素的子元素横向纵向居中显示。

方法2:

.box{
    display: flex;
    justify-content: center;
    align-content: center;
    flex-wrap: wrap;
}

也是只通过父级设置,把父元素设置成弹性很模型,然后设置父元素的子元素横向居中显示,然后通过弹性很模型的子元素组align-content:center对齐方式,配合flex-wrap:wrap实现。

方法3:

.box{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.box:before{
    content: ‘‘;
    flex-grow: .5;
}

这个也只只给父级设置,不同的是这个需要借助父级的伪元素;先把父元素设置成弹性很模型,然后设置纵向排列,然后设置横轴左右居中,然后再借助父元素伪类,设置纵向占据父元素的.5大小,实现上下居中。

方法4:

.box{
    display: flex;
}
.content{
    margin: auto;
}

把父元素设置成弹性很模型,然后通过要居中的子元素设置margin:auto,元素外间距依照父级自适应外间距。

方法5:

.box{
    display: flex;
    justify-content: center;
}
.content{
    align-self: content
}

把父元素设置成弹性很模型,然后子元素设置align-self: content。

查看案例: https://codepen.io/qwguo88/full/ZEbKgXG

使用grid网格布局实现居中

通过css的最新布局形式grid网格布局,也有多种方式,网格布局也可以给父级单独设置,或者父级子级结合设置实现

html代码结构完全一样:

<div class="box">
    <div class="content">
      这是要垂直居中的内容。
    </div>
</div>

方法1:

.box{
    display: grid;
    place-content: center;
}

方法2:

.box{
    display: grid;
    place-items: center;
}

方法3:

.box{
    display: grid;
    justify-content: center;
    align-content: center;
}

方法4:

.box{
    display: grid;
    justify-content: center;
    align-items: center;
}

方法5:

.box{
    display: grid;
}
.content{
    margin: auto;
}

方法6:

.box{
    display: grid;
    justify-content: center;
}
.content{
    align-self: center;
}

查看案例: https://codepen.io/qwguo88/full/PoPmJbo

使用calc()计算函数实现

此方法需要固定高度

<div class="box">
    <div class="content">
      这是要垂直居中的内容。
    </div>
</div>
.content{
    margin: auto;
    position: relative;
    width: 300px;
    height: 100px;
    top: calc((100% - 100px)/ 2);
}

首先设置固定宽高,利用margin:auto左右居中,然后通过relative定位top通过calc()函数计算,使用父级的100% 减去元素自身高度然后除以2,也就是总高度减去元素高度计算后的一半值,如果元素设置了边线和内边距需要相应的减掉。

使用设置文字排布方向属性writing-mode实现

<div class="box">
    <div class="box-inner">
        <div class="content">
          这是要垂直居中的内容。
        </div>
    </div>
</div>
.box{
    writing-mode: tb-lr;
    writing-mode: vertical-lr;
    text-align: center;
}
.box-inner{
    width: 100%;
    display: inline-block;
    writing-mode: lr;
    writing-mode: horizontal-tb;
}
.content{
    display: inline-block;
    text-align: left;
}

这个方法相对来说复杂一些,需要多加一个标签,首先给最外层改变排布方向为垂直排布,然后设置垂直居中;然后在里边一层再把排布方向设置回来,并且设置为行内块级元素宽度100%;最后让居中的元素设置成行内块级元素,文字对齐设置成左对齐实现。

查看案例: https://codepen.io/qwguo88/full/GRpmMjV

相关推荐