在 CSS 中要设置元素水平垂直居中是一个非常常见的需求了。但就是这样一个从理论上来看似乎实现起来极其简单的,在实践中,它往往难住了很多人。
让元素水平居中相对比较简单:如果它是一个行内元素,就对它的父元素应用 text-align: center;如果它是一个块级元素,就对它自身应用 margin: auto。
然而如果要对一个元素进行垂直居中,那就没有那么容易了,有时候光是想想就令人头皮发麻了。
本文分别从行内元素和块级元素进行说明,将目前比较流行的实现方式进行汇集并解析实现原理,方便大家查阅。这里要说明一点,每一种方式都不是十全十美的,关键要看自己的需求,从而分析出哪种实现方式是最合适的。
行内元素
首先我们先把基础代码写出来:
<div class="main"> <span class="content">我是要居中的行内元素span</span> </div>
.main { width: 300px; height: 300px; background-color: #50ba8b; } .content { background-color: #5b4d4e; color: #FFFFFF; }
class 为 .main 的 div 包裹这一个 class 为 .content 的行内元素 span,我们的目的就是要让 .content 元素 在 .main 元素中居中。
水平居中
text-align
行内元素的水平居中比较简单,我们直接在 .main 中添加 text-align: center; 即可,此时 .main 变为:
.main { width: 300px; height: 300px; background-color: #50ba8b; text-align: center; /* 水平居中 */ }
实现原理: 设置 text-align 的值为 center ,因为该属性规定元素中的文本的水平对齐方式,那么设置为 center 则文本就水平居中了。
垂直居中
line-height
行内元素的垂直居中我们分为 一行 和 多行或者图片等替换元素 来说明。
如果是 一行,那么我们可以使用 line-height 来实现,此时 .main 元素 css 代码变为:
.main { width: 300px; height: 300px; /* 可以不设置 */ background-color: #50ba8b; line-height: 300px; /* 垂直居中 */ }
其实设置了 line-height 就可以让文本垂直居中,并不需要同时设置 height,这里也是一直存在的一个误区。
实现原理: 这种方式实现垂直居中运用的是 CSS 中“行距的上下等分机制”,这也说明了为什么该方式只适用于 一行 的文本。
还有一点需要说明是,这种方式实现的垂直居中是“近似”的,并不是完美的垂直居中,因为文字字形的垂直中线位置普遍要比真正的“行框盒子”的垂直中线位置低,而由于我们平时使用的 font-size 比较小,使得这点偏差不容易察觉出来,那么感官上也就看成是垂直居中了。
line-height 及 vertical-align
下面再来说说 多行或者图片等替换元素 的垂直居中效果实现,这里我们需要同时借助 line-height 和 vertical-align 来实现。
先让文本换行:
<div class="main"> <span class="content"> 我是要居中的行内元素span <br> 我是要居中的行内元素span </span> </div>
再看修改之后的 css 代码:
.main { width: 300px; background-color: #50ba8b; line-height: 300px; } .content { display: inline-block; background-color: #5b4d4e; color: #FFFFFF; line-height: 20px; margin: 0 20px; vertical-align: middle; }
实现原理:
块级元素
依然先把基础代码写出来:
<div class="main"> <div class="content">我是要居中的块级元素div</div> </div>
.main { width: 300px; height: 300px; background-color: #50ba8b; } .content { width: 150px; height: 150px; background-color: #5b4d4e; }
class 为 .main 的 div 包裹这一个 class 为 .content 的 块级元素 div,我们的目的就是要让 .content 元素 在 .main 元素中居中。
position + margin: auto
实现代码如下:
.main { width: 300px; height: 300px; background-color: #50ba8b; /*关键代码*/ position: relative; } .content { width: 150px; height: 150px; background-color: #5b4d4e; /*关键代码*/ position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; }
实现原理:
position + margin-left/top
实现代码如下:
.main { width: 300px; height: 300px; background-color: #50ba8b; /*关键代码*/ position: relative; } .content { width: 150px; height: 150px; background-color: #5b4d4e; /*关键代码*/ position: absolute; top: 50%; left: 50%; margin-left: -75px; margin-top: -75px; }
实现原理:
position + translate
实现代码如下:
.main { width: 300px; height: 300px; background-color: #50ba8b; /*关键代码*/ position: relative; } .content { width: 150px; height: 150px; background-color: #5b4d4e; /*关键代码*/ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
实现原理:
Flexbox
实现代码如下:
.main { width: 300px; height: 300px; background-color: #50ba8b; /*关键代码*/ display: flex; } .content { width: 150px; height: 150px; background-color: #5b4d4e; /*关键代码*/ margin: auto; }
实现原理:
Flexbox 的另一个好处在于,它还可以将匿名容器(即没有被标签包裹的文本节点)垂直居中。比如我们不设置 .main 元素为 display: flex;,而是设置 .content 元素为 display: flex;,并借助 Flexbox 规范所引入的 align-items 和 justify-content 属性,我们可以让它内部的文本也实现居中(我们可以对.main 元素使用相同的属性来使 .content 元素元素居中,但比 margin: auto 方法要更加优雅一些,并且同时起到了回退的作用)。
.content { width: 150px; height: 150px; background-color: #5b4d4e; /*关键代码*/ display: flex; align-items: center; justify-content: center; margin: auto; }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
1.HTML5的内容类型 内容类型 描述 内嵌 向文档中添加其他类型的内容,例如audio...
注释1:上图整个大背景是这个网页的全部尺寸,中间的小框才是浏览器中的可见尺寸...
先点赞再看,养成好习惯 前言 这两天在另一个社区看到了一个关于 Tomcat 的提问...
Redis 官方在 2020 年 5 月正式推出 6.0 版本,提供很多振奋人心的新特性,所以...
data URI scheme 允许我们使用内联(inline-code)的方式在网页中包含数据,可以...
解决方法如下: 第一种 使用iframe,但是目前使用iframe的人已经越来越少了,而...
content属性一般用于::before、::after伪元素中,用于呈现伪元素的内容。平时con...
简介: 企业上云多账号架构中,如何做到从上到下管理的同时,处理好员工的权限边...
复制代码 代码如下: !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional...
John Au-Yeung 来源:medium 译者:前端小智 有梦想,有干货,微信搜索 【大迁世...