css 实现竖直居中的 N 种场景及 N 种方法

rozbo 发布于2019-08-29 11:26 / 3269人阅读

摘要：块级元素竖直居中通常借助绝对定位和等手段，在已知或者未知块级元素高度时，分别使用不同的方法。

刚开始工作的时候，css 里的竖直居中一直是个老大难问题。每次用到的时候都去网上搜，搜，搜，半天才搜到合适的解决方法。然后下次遇到，呃，又忘了~

后来仔细回忆了一下，其实CSS实现竖直居中是有几种不同的应用场景的，需要分别使用不同的解决方法。这也是为啥每次都觉得，诶上次那个解决方法好像不行呢？（原来并不是我智商的问题）好了废话不多说，记录下遇到的不同场景及解决方法，希望能对自己或者别人有所帮助。

inline 或者 inline-* 的元素竖直居中

可以借助 padding, line-height, vertical-align 等属性。有如下两种具体情景：

1. 单行竖直居中，如单行文本或者链接

这种情况，通过给元素上下添加相同大小的 padding 值即可实现竖直居中。

RapmvY

如果~~本姑娘就不想使用 padding~~ 不方便使用 padding 时，可以通过给元素设置 line-height，使其等于父容器的高度，从而实现竖直居中。==注意，此时记得要考虑父容器的 padding 和 border 带来的高度变化。==

bpqPwN

2. 多行竖直居中，如多行文本

和单行文本一样，给元素上下添加相同大小的 padding 值，还是好用滴~
ONpeEV

另外一种方法，是借助 table 的属性：将父容器设置成 table，需要竖直居中的元素设置为 table-cell，然后就可以使用 vertical-align 属性来居中了。

MypMBE

块级元素竖直居中

通常借助 绝对定位 和 translate 等手段，在已知或者未知块级元素高度时，分别使用不同的方法。

1. 块级元素高度已知

此时可以使用绝对定位的方法，并借助 margin 可以为负值的特性，实现绝对定位居中：

/* 已知元素高度为 100px (也可以是百分比，如 80%)*/
height: 100px;

/* 先使用绝对定位，将元素的上边界置于竖直的中间*/
position: absolute;
top: 50%;

/* 再使用margin-top，将元素向上移动自身高度的一半*/
margin-top: -50px;

KzWjbq

笔者表示类似这段代码的使用频率简直不要太高~ 于是在使用 scss 的前提下，自己封装了一个 mixin，专门用来实现这种定位方式。

// 定义绝对定位实现水平、垂直居中
@mixin abs_h_center($width) {
  position: absolute;
  width: $width;
  left: 50%;
  margin-left: -($width/2);
}
@mixin abs_v_center($height) {
  position: absolute;
  height: $height;
  top: 50%;
  margin-top: -($height/2);
}

// 然后使用的时候直接引用就可以了，这样可以避免在改动元素宽或高时，还需要同时去改 margin-left 或者 margin-top 的值
.content {
  @include abs_v_center(200px);
}

2. 块级元素高度不固定

与上面提到的使用绝对定位居中的方法原理类似，只不过在元素高度不确定的情况下，借助 translateY 使元素向上移动自身高度的一半，进而实现竖直居中。

/* 先将元素的上边界置于竖直的中间*/
position: relative;
top: 50%;

/* 再使用 translateY，将元素向上移动自身高度的一半*/
transform: translateY(-50%);

bpqPyB

目前想到的就这些，应该足够覆盖大部分的使用情况了~ 以上这些实现方法，当然也可以是混合使用的，具体如何，就看应用场景啦。

另外，以后再遇到别的竖直居中的实现方法，也会更新到这里。

云服务器 GPU云服务器三种实现方法在家赚钱的十种方法数据迁移的四种方法 Error的2种方法

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111651.html

水平、垂直居中方式总结

摘要：我们在实际工作中经常会遇到需要水平居中或者垂直居中的场景，今天我们就来看一下如何设置水平居中和垂直居中。水平居中行内元素。不定宽块状元素水平居中我们来学习一下这种方法。我们在实际工作中经常会遇到需要水平居中或者垂直居中的场景，今天我们就来看一下如何设置水平居中和垂直居中。水平居中行内元素。如果被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置text-align:c...

陆斌 2019-08-30 12:49 评论0 收藏0
CSS居中那些事

摘要：定宽块状元素满足定宽和块状两个条件的元素是可以通过设置左右值为来实现居中的。设置方法改变块级元素的为类型设置为行内元素显示，然后使用来实现居中效果。做前端这一年多来，其实一直都是偏向于js前后端，css什么的总是抱着够用就好的心态，从来没有系统的学习或总结过，结果现在的水平也一直停留在够用的阶段。感觉作为一名合格的前端工程师，不能让css成为自己的短板，于是简单的总结一下，高手绕路。...

dingding199389 2019-08-30 13:13 评论0 收藏0
CSS实现元素垂直居中

摘要：实现元素垂直居中对元素的垂直居中针对于单行元素和多行元素将分情况讨论。三父元素高度确定的多行文本多行文本，图片，块级元素皆属于这种情况，对此的垂直居中主要有两种方法。插入对要垂直居中的元素外插入包括标签，同时设置。 CSS实现元素垂直居中对元素的垂直居中针对于单行元素和多行元素将分情况讨论。一、父元素高度确定的单行文本父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的 h...

RobinTang 2019-08-28 18:14 评论0 收藏0
CSS实现元素垂直居中

摘要：实现元素垂直居中对元素的垂直居中针对于单行元素和多行元素将分情况讨论。三父元素高度确定的多行文本多行文本，图片，块级元素皆属于这种情况，对此的垂直居中主要有两种方法。插入对要垂直居中的元素外插入包括标签，同时设置。 CSS实现元素垂直居中对元素的垂直居中针对于单行元素和多行元素将分情况讨论。一、父元素高度确定的单行文本父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的 h...

joywek 2019-08-01 14:50 评论0 收藏0
css的结构与布局

摘要：实际上表示视口宽度的，而不是。同样，表示视口高度的当视口宽度小于高度时，等于，否则等于。基于的方法这种应该算是最佳的解决办法实现方法当使用布局时，使用在水平和垂直方向都会居中。 1.自适应内部元素在css中，不给元素一个height值时，元素会自适应其内部的元素高度，有时我们想让元素的宽度也达到此效果，应用场景如下。如下当前的这种布局，想要改成最外层的div的宽度由当前的图片撑开的...

GeekQiaQia 2019-08-29 12:25 评论0 收藏0