web前端实现CSS实现水平或垂直居中技巧合集

原创 于 2021-11-08 17:38:19 发布 · 517 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css #前端 #css3

本文介绍了14种使用CSS实现元素水平或垂直居中的方法，包括line-height、inline-block、table布局、absolute定位、Flex布局等。详细解释了每种方法的适用场景、原理及优缺点，帮助开发者灵活应对各种布局需求。

1、Line-height

适用情景：单行文字（垂直居中）

原理：将单行文字的行高设定后，文字会位于行高的垂直中间位置。

html：

Lorem ipsam.

css：

.example{

width: 400px;

background: #afddf3;

line-height: 50px;

}

2、Line-height + inline-block

原理：将多个元素或多行元素当成一个行元素来看待，所以我们必须要将这些数据多包一层，并将其设定为inline-block。

由于inline-block在不同浏览器会有空隙产生，因此设定父元素font-size：0来消除，从而达到完美的垂直居中。

css：

.example2{

width: 400px;

border: 1px solid #dcdcdc;

line-height: 100px;

font-size: 0;

}

.example2 .con {

display: inline-block;

line-height: 2;

vertical-align: middle;

width: 300px;

font-size: 15px;

background: #afddf3;

}

3、:before + inline-block

原理：:before 伪类元素搭配 inline-block 属性的写法应该是很传统的垂直居中的技巧了，此方式的好处在于子元素居中可以不需要特别设定高度。

我们将利用:before伪类元素设定为100%高的inline-block，再搭配上将需要居中的子元素同样设置成inline-block性质后，就能使用vertical-align: middle来达到垂直居中的目的了。

此方式在以往其实是个非常棒的垂直居中解决方案，唯独需要特别处理掉inline-block元素之间的4-5px空间这个小缺陷，不用怕，设置父元素font-size: 0，子元素font-size: 15px即可。

CSS:

.example3 {

margin-top: 10px;

width: 400px;

height: 150px;

font-size: 0;

border: 1px solid #dcdcdc;

}

.example3::before {

content: ‘’;

display: inline-block;

height: 100%;

width: 0;

vertical-align: middle;

}

.example .con {

width: 300px;

font-size: 15px;

background: #afddf3;

display: inline-block;

vertical-align: middle;

}

4、table + margin

适用情景：单对象（水平居中）

原理：将子元素设置块级表格，再设置水平居中。

CSS:

.example4 {

margin-top: 10px;

width: 400px;

height: 150px;

font-size: 0;

border: 1px solid #dcdcdc;

}

.example .con {

display: table;

margin: 0 auto;

width: 300px;

font-size: 15px;

background: #afddf3;

}

5、table + table-cell + vertical-align: middle

适用情景：多对象（垂直居中）

html:

超级好用超级放心

在线压缩图片

压缩完可以打包下载哦

CSS-TRICKS

css:

.example5 {

display: table;

margin-top: 10px;

width: 400px;

height: 150px;

font-size: 0;

border: 1px solid #dcdcdc;

}

.example .con {

display: table-cell;

vertical-align: middle;

width: 300px;

font-size: 15px;

background: #afddf3;

}

6、absolute + margin 负值

原理：设置绝对定位，top: 50%;后，再设置高度一半的负值实现。说来说去，这就是一道简单的数学题而已。

缺陷：需要设置居中元素的高度。

优势：无浏览器兼容性问题

css:

.example6 {

position: relative;

margin-top: 10px;

width: 400px;

height: 150px;

font-size: 0;

border: 1px solid #dcdcdc;

}

.example6 .con {

position: absolute;

top: 50%;

height: 80px;

margin-top: -40px;

width: 300px;

font-size: 15px;

background: #afddf3;

}

7、absolute + margin auto

原理：当元素设置为绝对定位后，假设它是抓不到整体可运用的空间范围，所以margin: auto会失效，但当你设置了top:0;bottom:0;时，绝对定位元素就抓到了可运用的空间了，这时你的margin:auto就生效了。

缺陷：定位元素必须有固定的宽高（百分比也算）。

css:

.example7 {

position: relative;

margin-top: 10px;

width: 400px;

height: 150px;

font-size: 0;

border: 1px solid #dcdcdc;

}

.example7 .con {

position: absolute;

top: 0;

bottom: 0;

left: 0;

right: 0;

margin: auto;

height: 80px;

width: 300px;

font-size: 15px;

background: #afddf3;

}

8、absolute + translate

原理：利用绝对定位时的top 与right设置元素的上方跟左方各为50%，再利用transform: translate(-50%, -50%);位移居中元素自身宽与高的50%就能达成居中的目的了。

缺陷：translate是css3属性，低版本浏览器不支持。

显著优势：无需固定定位元素的宽高。

css:

.example8 {

position: relative;

margin-top: 10px;

width: 400px;

height: 150px;

font-size: 0;

border: 1px solid #dcdcdc;

}

.example8 .con {

position: absolute;

left: 50%;

top: 50%;

transform: translate(-50%, -50%);

font-size: 15px;

background: #afddf3;

}

9、Flex + align-items

适用情景：多行文字（垂直居中）

原理：弹性布局，align-items定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式，参考CSS-TRICKS。

缺陷：css3属性，低版本浏览器不支持。

显著优势：无需固定定位元素的宽高，代码干净利索。

css:

.example9 {

display: flex;

align-items: center;

margin-top: 10px;

width: 400px;

height: 150px;

font-size: 0;

border: 1px solid #dcdcdc;

}

.example9 .con {

font-size: 15px;

background: #afddf3;

}

10、Flex + justify-content

适用情景：多行文字（水平居中）

原理：弹性布局，justify-content设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式，参考CSS-TRICKS。

缺陷：css3属性，低版本浏览器不支持。

显著优势：无需固定定位元素的宽高，代码干净利索。

css:

.example10 {

display: flex;

justify-content: center;

margin-top: 10px;

width: 400px;

height: 150px;

font-size: 0;

border: 1px solid #dcdcdc;

}

.example .con {

height: 80px;

font-size: 15px;

background: #afddf3;

}

11、Flex + :before + flex-grow

适用情景：多行文字（垂直居中）

原理：弹性布局，Flex-direction：column;将项目垂直显示，正如一个列一样。flex-grow: [number];规定项目将相对于其他灵活的项目进行扩展的量，参考CSS-TRICKS。

缺陷：css3属性，低版本浏览器不支持，并且难度稍大，一般不会想到这种方法。

显著优势：无需固定定位元素的宽高

css:

.example11 {

display: flex;

flex-direction: column;

margin-top: 10px;

width: 400px;

height: 150px;

font-size: 0;

border: 1px solid #dcdcdc;

}

.example11:before {

content: ‘’;

flex-grow: .5;

}

.example11 .con {

font-size: 15px;

background: #afddf3;

}

12、Flex + margin

缺陷：css3属性，低版本浏览器不支持。

css:

.example12 {

display: flex;

margin-top: 10px;

width: 400px;

height: 150px;

font-size: 0;

border: 1px solid #dcdcdc;

}

.example12 .con {

margin: auto;

width: 300px;

font-size: 15px;

background: #afddf3;

}

13、Flex + align-self

原理：align-self定义flex子项单独在侧轴（纵轴）方向上的对齐方式。

缺陷：css3属性，低版本浏览器不支持。

css:

.example13 {

display: flex;

justify-content: center;

margin-top: 10px;

width: 400px;

height: 150px;

font-size: 0;

border: 1px solid #dcdcdc;

}

.example13 .con {

align-self: center;

width: 300px;

font-size: 15px;

background: #afddf3;

}

14、Flex + align-content

原理：align-content在弹性容器内的各项没有占用交叉轴上所有可用的空间时对齐容器内的各项（垂直），弹性项目有多项此属性才会发挥作用。

缺陷：css3属性，低版本浏览器不支持。

css:

.example14 {

display: flex;

align-content: center;

flex-wrap: wrap;

margin-top: 10px;

width: 400px;

height: 150px;

font-size: 0;

border: 1px solid #dcdcdc;

}

.example14:before, .example14:after {

content: “”;

display: block;

width: 100%;

}

.example14 .con {

height: 80px;

width: 300px;

font-size: 15px;

background: #afddf3;

}

下面是一个比较常见的例子,往往是不想让图片发生变形并且不管尺寸大小均会显示在容器的正中央（以下例子应用的是第8条）。

html:

css:

.imgbox-box {

display: flex;

justify-content: center;

margin-bottom: 40px;

}

.imgbox {

width: 200px;

height: 200px;

position: relative;

background: #ebf8ed;

overflow: hidden;

}

.imgbox img {

position: absolute;

left: 50%;

top: 50%;

transform: translate(-50%, -50%);

max-width: 100%;

max-height: 100%;

}

结语

有些是水平居中，有些是垂直居中，将它们某两个合在一起就能实现水平和垂直均居中。

今天爱创课堂小编的分享就到这里了，有想学习前端，了解前端更多知识的同学，欢迎大家点赞，关注，私信我！！！

在这里插入图片描述

博客
11 个 ES2022（ES13)中惊人的 JavaScript 新特性
08-08 327
11 个 ES2022（ES13)中惊人的 JavaScript 新特性
博客
Web前端VS后端那个好一点
04-11 1414
作为一个从事IT培训行业多年的人，被问及最多的三个问题就是，前端和后端哪个更好学？前端和后端哪个就业前景好？哪个薪资更高？众所周知，最近几年互联网发展迅速，想要从事互联网的同学也越来越多。那对于新手来说，选择一个自己喜欢的方向非常重要。有兴趣才能坚持，坚持才能成功。Java和Web前端，是当前热门职业之中之二，两者在关注度和热度上不分伯仲，也经常被拿来比较。那么，Java和Web前端，IT新人该如何选择呢？从发展层面来说，Java作为一门老牌编程语言，在国内的发展已经非常完善，目前，大部分的企业都使用
博客
web前端培训 - JavaScript 扩展运算符
03-21 391
JavaScript 扩展运算符简介ES6 提供了一个名为扩展运算符的新运算符，它由三个点 (…) 组成。扩展运算符允许我们扩展可迭代对象的元素，例如数组、映射或集合。例如：const odd = [1,3,5];const combined = [2,4,6, …odd];console.log(combined);输出：[ 2, 4, 6, 1, 3, 5 ]在此示例中，奇数数组前面的三个点 (…) 是展开运算符。扩展运算符 (…) 解包奇数数组的元素。请注意，ES6 还具有三个点 (…
博客
web前端培训 - 八进制和二进制字面量
03-18 1156
ES5 提供了八进制（前缀 0）、十进制（无前缀）和十六进制 (0x) 的数字文字。ES6 增加了对二进制字面量的支持并改变了它表示八进制字面量的方式。八进制要在 ES5 中表示八进制文字，我们使用零前缀 (0) 后跟八进制数字序列（从 0 到 7）。例如：let a = 051;console.log(a); // 41如果八进制文字包含超出范围的数字，JavaScript 会忽略前导 0 并将八进制文字视为十进制，如下例所示：let b = 058; // invalid octalcon
博客
web前端培训 - 12个有用的 JavaScript 代码片段
03-14 2675
1、数值排序 | 升序 [⇣⁰₉]const arr = [40, 100, 1, 5, 25, 10];arr.sort(function(a, b){return a-b;});之前：[40,100,1,5,25,10]之后：[1,5,10,25,40,100]说明：对于数字排序，必须创建一个 Comparator 实体或比较函数。在上面的代码片段中，这相当于const compare = function(a, b){return a-b;};排序结果是arr.sort(com
博客
web前端培训 - 使用const 关键字定义常量
03-08 453
JavaScript const 关键字简介ES6 提供了一种使用 const 关键字声明常量的新方法。const 关键字创建对值的只读引用。const CONSTANT_NAME = value;按照惯例，常量标识符是大写的。与 let 关键字一样， const 关键字声明块作用域变量。但是，由 const 关键字声明的块范围变量不能重新分配。let 关键字声明的变量是可变的。这意味着我们可以随时更改它们的值，如以下示例所示：let a = 10;a = 20;a = a + 5;con
博客
web前端培训 - let关键字声明块范围的变量
03-03 877
JavaScript let 关键字简介在 ES5 中，当我们使用 var 关键字声明一个变量时，变量的作用域要么是全局的，要么是局部的。如果在函数之外声明变量，则变量的范围是全局的。在函数内声明变量时，变量的作用域是局部的。ES6 提供了一种使用 let 关键字声明变量的新方法。let 关键字类似于 var 关键字，只是这些变量是块作用域的。例如：let variable_name;在 JavaScript 中，块用花括号 {} 表示，例如 if else、for、do while、while、t
博客
web前端 - 6 个可以在 CSS 代码中使用的CSS 函数
02-21 309
CSS 是每个 Web 开发人员必备的样式表语言。 它允许我们设置网页样式并使其具有响应性。 此外，借助 flexbox 和 grid 等新的 CSS 功能，我们可以轻松地为我们的网页创建复杂的布局。CSS与所有其他不同的语言一样，CSS 也有自己可以使用的功能。 这些函数可以放置在您要放置属性值的位置。在某些情况下，它们可以伴随另一个值声明。 一些 CSS 函数甚至可以嵌套到其他函数中，让您一次完成许多事情。在本文中，我将与您分享一些作为 Web 开发人员应该知道的有用的 CSS 函数。 现在，让我
博客
web前端 - 写出漂亮JavaScript代码的实用技巧
02-15 468
1、按强类型风格写代码js是弱类型的，但是写代码的时候不能太随意，写得太随意也体现了编码风格不好。下面分点说明：（1）定义变量的时候要指明类型，告诉JS解释器这个变量是什么数据类型的，而不要让解释器去猜，例如不好的写法：var num,str,obj;声明了三个变量，但其实没什么用，因为解释器不知道它们是什么类型的，好的写法应该是这样的：var num =0,str =’’,obj =null;定义变量的时候就给他一个默认值，这样不仅方便了解释器，也方便了阅读代码的人，他会在心里有数——
博客
web前端培训好处及前端成长路线
02-11 632
当今IT行业盛行，从事IT行业人员越来越多，从前端到后端职业中，更多的人喜欢前端开发，因为前端入门简单，学习起来容易，并且现在市场需求逐渐加大，只要拥有好的技术，会深受企业亲睐！今天就为各位分享web前端起步阶段、提升阶段、成型阶段都应该学习哪些知识？如何去学习这些知识？起步阶段1、基本知识的掌握在梳理的知识架构中，按照分析的两个维度里最前置的、最浅显的部分，作为打基础的阶段，必须要在这个过程中更多投入到实践中去，通常做的多了、熟练了，就认为这部分知识和内容掌握了。2、常用工具的掌握对于常用工具的
博客
web前端 - CSS快速开发技巧
01-19 499
使用CSS重置（reset）css重置库如normalize.css已经被使用很多年了，它们可以为你的网站样式提供一个比较清晰的标准，来确保跨浏览器之间的一致性。大多数项目并不需要这些库包含的所有规则，可以通过一条简单的规则来应用于布局中的所有元素，删除所有的margin、padding改变浏览器默认的盒模型。*{ box-sizing:border-box; margin:0; padding:0 }使用box-sizing声明是可选择，如果你使用下面继承的盒模型形式可以跳过它。继承盒模型让盒
博客
web前端 - JS中的4个for循环
01-17 733
在 ECMAScript5（简称 ES5）中，有三个循环。在 2015 年 6 月发布的 ECMAScript6（简称 ES6）中，新增了一种循环类型。他们是：forfor infor eachfor of今天，就让我们一起来看看这4个 for 循环。1、简单的for循环我们来看看最常见的写法：const arr = [1, 2, 3];for(let i = 0; i < arr.length; i++) {console.log(arr[i]);}当循环中数组的长度没有变化
博客
web前端 - 5个常见的JavaScript内存错误
01-10 297
JavaScript 不提供任何内存管理操作。相反，内存由 JavaScript VM 通过内存回收过程管理，该过程称为垃圾收集。既然我们不能强制的垃圾回收，那我们怎么知道它能正常工作？我们对它又了解多少呢？脚本执行在此过程中暂停它为不可访问的资源释放内存它是不确定的它不会一次检查整个内存，而是在多个周期中运行它是不可预测的，但它会在必要时执行这是否意味着无需担心资源和内存分配问题?当然不是。如果我们一不小心，可能会产生一些内存泄漏。什么是内存泄漏？内存泄漏是软件无法回收的已分配的内存块。
博客
web前端 -关于this的面试题
01-05 351
1、默认绑定默认绑定通常是指函数独立调用，不涉及其他绑定规则。非严格模式下，this指向window，严格模式下，this指向undefined。01、题目1.1：非严格模式var foo = 123;function print(){this.foo = 234;console.log(this); // windowconsole.log(foo); // 234}print();非严格模式，print()为默认绑定，this指向window，所以打印window和234。这个fo
博客
JavaScript数组函数整理汇总
12-30 942
1、Array.isArray()我们列表中的第一项是 JavaScript 中的 isArray 方法，它确定传递的输入是否为数组。语法：在下面的代码中， arr 将是我们要检查的输入，是否为数组。isArray() 函数的结果将是一个布尔值。Array.isArray(arr)示例：Array.isArray([1, ‘something’, true]);// trueArray.isArray({anything: 123});// falseArray.isArray(‘som
博客
web前端 - JavaScript 中一流函数的日常用例
12-22 254
什么是“一流函数”？维基百科的定义：在计算机科学中，如果一种编程语言将函数视为一等公民，那么它就被称为具有一等函数。这意味着该语言支持将函数作为参数传递给其他函数，将它们作为其他函数的值返回，并将它们分配给变量或将它们存储在数据结构中。例如，在 JavaScript 中，我们可以将一个函数分配给一个变量。var sum = function(a, b) {return a + b;}var total = sum(10, 1);如果我们是第一次阅读，这个定义会有点混乱。然而，事实是我们在不知
博客
web前端 - 10 个很酷、很实用JavaScript特性
12-16 1549
1、空运算符如果左侧为空或未定义，则此运算符返回右侧值。const data= null ?? ‘data’;console.log(data);// expected output: “data”const data1 = 1 ?? 4;console.log(data1);// expected output: 1逻辑 OR (||) 运算符执行相同的操作，但是，当将 0 作为值传递时，它将视为 false，这使得它容易用于数字。function add(a, b) {val1 =
博客
web前端 - Vue常见问题汇总及解决方案
12-08 1289
Q1：安装超时(install timeout)方案有这么些:cnpm : 国内对npm的镜像版本/*cnpm website: https://npm.taobao.org/*/npm install -g cnpm --registry=https://registry.npm.taobao.org// cnpm 的大多命令跟 npm 的是一致的,比如安装,卸载这些yarn 和 npm 改源大法//使用 nrm 模块 : www.npmjs.com/package/nrmnpm co
博客
web前端 - 6 种在 JavaScript 中清理代码的方法
12-01 1078
1、删除不必要的 return 语句：检查函数内部是否需要存在。可以简化为一行代码吗？如果是这样，JavaScript 允许使用隐式返回来简化代码。从下面检查代码。在那里，我删除了额外的变量声明 usersFound，让我可以选择删除未使用的 return 语句。// This function receives as arguments an array of objects,// [{ firstName: ‘Test’ }, { firstName: ‘Ignacio’ }, …]// Th
博客
web前端 - 正则表达式的整理汇总
11-25 1073
很多不太懂正则的朋友，在遇到需要用正则校验数据时，往往是在网上去找很久，结果找来的还是不很符合要求。所以我最近把开发中常用的一些正则表达式整理了一下，在这里分享一下。给自己留个底，也给朋友们做个参考。01、手机机身码(IMEI)/^\d{15,17}$/02、必须带端口号的网址(或ip)/^((ht|f)tps?????/)?[\w-]+(.[\w-]+)+:\d{1,5}/?$/03、网址(url,支持端口和"?+参数"和"#+参数)/(((ht|f)tps?)????/)?[\w-]+(.
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值