使用 CSS 实现垂直居中的8种方法

已于 2023-02-07 16:59:45 修改
阅读量10w+ 收藏 192
点赞数 46
分类专栏： 前端 -- CSS 文章标签： 面试 javascript 前端 css3 html5
于 2022-03-25 16:53:37 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_52409770/article/details/123739874
版权

​​​​​​CSS垂直居中的8种方法

目录

​​​​​​CSS垂直居中的8种方法

1、通过vertical-align:middle实现CSS垂直居中。

2、通过display:flex实现CSS垂直居中。

3、通过伪元素:before实现CSS垂直居中。

4、通过display:table-cell实现CSS垂直居中。

5、通过隐藏节点实现CSS垂直居中。

 6、已知父元素高度通过transform实现CSS垂直居中。

 7、到垂直居中的位置。

 8、通过line-height实现CSS垂直居中。

1、通过vertical-align:middle实现CSS垂直居中。

通过vertical-align:middle实现CSS垂直居中是常使用的方法，但是有一点需要格外注意，vertical生效的前提是元素的display：inline-block。

在使用vertical-align：middle的时候需要一个兄弟元素做参照物，让它垂直于兄弟元素的中心点。vertical-align对齐的方法是寻找兄弟元素中最高的元素作为参考。

看代码可能比较好理解：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>CSS垂直居中</title>
  <style>
    .wrapper {
      width: 500px;
      height: 500px;
      background-color: pink;

      text-align: center;
    }

    .box {
      width: 100px;
      height: 100px;
      background-color: deepskyblue;

      display: inline-block;
      vertical-align: middle;
      margin: 0 auto;
    }

    .help {
      width: 0;
      height: 100%;
      display: inline-block;
      vertical-align: middle;
    }
  </style>
</head>

<body>
  <div class="wrapper">
    <div class="box"></div>
    <div class="help"></div>
  </div>
</body>

</html>

2、通过display:flex实现CSS垂直居中。

随着越来越多浏览器兼容CSS中的flexbox特性，所以现在通过“display:flex”实现CSS水平居中的方案也越来越受青睐。

通过display:flex实现CSS垂直居中的方法是给父元素display:flex;而子元素align-self:center;

这个跟CSS水平居中的原理是一样的，只是在flex-direction上有所差别，一个是row(默认值)，另外一个是column。

3、通过伪元素:before实现CSS垂直居中。

具体方式是为父元素添加伪元素:before，使得子元素实现垂直居中。

4、通过display:table-cell实现CSS垂直居中。

给父元素display:table，子元素display：table-cell的方式实现CSS垂直居中。

5、通过隐藏节点实现CSS垂直居中。

创建一个隐藏节点#hide，使得隐藏节点的height值为剩余高度的一半即可。

这种方法也适用于CSS水平居中，原理一样。

 6、已知父元素高度通过transform实现CSS垂直居中。

给子元素的position:relative，再通过translateY即可定位到垂直居中的位置。

 7、到垂直居中的位置。

 8、通过line-height实现CSS垂直居中。

设置子元素的line-height值等于父元素的height，这种方法适用于子元素为单行文本的情况。

wincheshe
关注
  • 46
    点赞
  • 踩
  • 192
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
CSS 实现垂直居中的几种方法(必看)
12-13
最近在学关系型数据库相关，MySQL 和 Postgre,捎带着学了 PHP，为了练手这几天就忙着自己搭博客，项目部署在某云上，该云算是良心，给的空间自己搭博客用足够了。本来想着每日一bo的,所以有的时候实在来不及就只能隔天更新了。以后尽量发点东西出来，等博客搭完写一写 SQL 数据库基础相关的分享，给跟我一样的小白道友们做下参考，大神请直接无视~ 说到居中，很多人第一反应应该是水平居中，说到水平居中，肯定道友们有一万种方法做到，CSS3 的FlexBox更是强大到没朋友。但是良辰今天想聊的是 CSS 垂直居中的方法，下面是萌萌的分割线。神马？你敢说不萌？ •方式一 ：table 布局方法
纯CSS实现垂直居中的9种方法
01-19
为实现良好的兼容性，PC端实现垂直居中的方法一般是通过绝对定位，table-cell，负边距等方法。有了css3，针对移动端的垂直居中就更加多样化。 方法1：table-cell html结构： XML/HTML Code复制内容到剪贴板 <div u00a0class=box box1>           <span>垂直居中</span>   </div>   css： CSS Code复制内容到剪贴板 .box1{        display: table-cell;        vertical-align: middle;   
css中常用的水平垂直居中的方法（六种详细布局的方法）
贫僧法号依平
01-29 1231
内联元素居中布局块级元素居中布局。
CSS垂直居中的12种实现方式
weixin_34348111的博客
01-15 347
使用绝对定位和负外边距对块级元素进行垂直居中 HTML &lt;div id="box"&gt; &lt;div id="child"&gt;&lt;/div&gt; &lt;/div&gt; 复制代码 CSS #box { width: 300px; height: 300px; background: #ddd; position: relative; ...
前端css定位.pdf
07-28
本人整理的css定位
使用css实现div垂直居中的示例
09-25
主要介绍了使用css实现div垂直居中的示例,需要的朋友可以参考下
css垂直居中的6种方式
weixin_42974827的博客
09-08 1万+
这里实现了比较常用的垂直水平居中的方案，十分有用，希望对于面试必考题来说，只要熟练掌握前面三种，基本上是没有问题了，源码我会放在本人主页的资源里面，供大家免费下载，创作不易，关注一下，后续将带来vue版本大屏可视化解决方案。敬请期待吧~~~❤️。
CSS 垂直居中的七种方法——史上最详细总结
热门推荐
qq_37384271的博客
10-10 2万+
我们在写页面时，通常会用到水平居中或垂直居中，而水平居中很好处理，不外乎就是设定 margin: 0 auto; 或是 text-align: center; “垂直居中”却比较麻烦，下面介绍七种纯 CSS 实现垂直居中的方式。 一、设定行高（line-height） 设定行高是垂直居中最简单的方式，适用于“单行”的“行内元素”（inline、inline-block），例如单行的标题，或是已经设为 inline-block 属性的 div，若将 line-height 设成和高度一样的数值，则内容的行内元
css 居中问题的总结
qq_43889848的博客
05-15 2193
1.css让浮动的盒子水平居中 解决方法： 给浮动的盒子加一个父盒子，设置宽度跟浮动盒子一样大小，并且overflow:hidden; 设置该盒子为margin: 0 auto; <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> *{ padding: 0; margin:
CSS垂直居中的几种方法
m0_72838183的博客
10-04 6441
推荐大家几种常见的css垂直居中的方法，便于不同的场景使用，也方便大家面试时有更多的思路，如果大家有更好更多的方法，欢迎留言讨论
CSS实现垂直居中的7种方法
c_x_m的博客
03-04 1万+
CSS实现垂直居中的7种方法1、设定行高(line-height)2、设置伪元素::before3、absolute + transform4. 设置绝对定位5、设置display:flex6、absolute + calc7. display:table-cell实现CSS垂直居中。 1、设定行高(line-height) HTML： <div class="parent"> <span class="child">你好</span> </div>
CSS 垂直居中五种实现方法
12-29
利用 CSS 来实现对象的垂直居中有许多不同的方法，比较难的是选择那个正确的方法。我下面说明一下我看到的好的方法和怎么来创建一个好的居中网站。 使用 CSS 实现垂直居中并不容易。有些方法在一些浏览器中无效。下面我们看一下使对象垂直集中的5种不同方法，以及它们各自的优缺点。(可以看看测试页面，有简短解释。) 方法一 这个方法把一些 div 的显示方式设置为表格，因此我们可以使用表格的 vertical-align property 属性。 <div id=wrapper><div id=cell><div class=content> Content goes here</di
实现css文字垂直居中的8种方法
10-15
CSS可以轻易实现文字的水平居中，但有时我们需要文字垂直居中，除了表格可以实现这种CSS文字垂直居中以外，还有其它几种方法可以做到
CSS实现垂直居中的几种方法
12-13
有些方法在一些浏览器中无效，因此，到底选择哪种方法好，还要看具体情况。 方法一： 这个方法把一些 div 的显示方式设置为表格，因此我们可以使用表格的 vertical-align property 属性。 复制代码代码如下: ”...
Java斐波那契查找知识点（含面试大厂题和源码）
2302_80314137的博客
04-19 730
斐波那契查找（Fibonacci Search）是一种基于斐波那契数列的搜索算法，它在有序数组中查找特定元素。斐波那契查找是二分查找的一种优化版本，它使用斐波那契数列的特性来决定搜索区间的划分，从而减少比较次数。
面试ssss
qq_51685537的博客
04-23 738
数据劫持（Data Observation）：Vue 使用了一种称为「数据劫持」的技术来追踪数据的变化。它通过使用 Object.defineProperty() 方法，将数据对象的属性转换为 getter 和 setter。当访问或修改属性时，Vue 能够捕获到这些操作，并触发相应的更新。监听器（Watcher）：在 Vue 中，每个数据属性都有一个对应的监听器对象。监听器会订阅数据的变化，并根据变化触发相应的更新操作。当数据发生变化时，监听器会通知相关的视图进行更新。
成长&工作&思考
WindwirdBird的博客
04-20 576
这一篇，不是技术博客，而是个人发展的一些思考和总结，复盘才会做的更好，成长的道路当然不是随着时间推移。
Redis面试题一（基本概念）
最新发布
qq_22321199的专栏
04-24 650
Redis的快速性能主要归因于其基于内存的数据存储、单线程无锁并发模型、使用C语言实现、精心设计的数据结构、对磁盘I/O的谨慎处理以及高效的网络通信机制。这些特性共同作用，使得Redis能够在处理大量高速数据访问场景时表现出卓越的性能。
深圳南玻集团（二面）
qq_54432917的博客
04-18 279
不得不说这家公司的办事效率是真的高。我昨天下午3点面试的，4点结束。然后4点45分就跟我说面试通过了，叫我明天早上10点进行二面。二面聊了大概20分钟左右吧，那个面试官是信息部的，好像是个总监还是总经理，反正叫沈总。
css元素垂直居中
06-02
在 CSS 中，实现元素垂直居中的方式有很多种。以下是几种常见的方式： 1. 使用 flexbox 布局，将容器设置为 display: flex;，并使用 align-items: center; 属性将元素垂直居中。 ``` .container { display: flex; align-items: center; } ``` 2. 使用绝对定位，将元素的 top 和 bottom 属性都设置为 0，并将 margin 属性设置为 auto。 ``` .element { position: absolute; top: 0; bottom: 0; margin: auto; } ``` 3. 使用 table-cell 属性，将容器设置为 display: table-cell;，并使用 vertical-align: middle; 属性将元素垂直居中。 ``` .container { display: table-cell; vertical-align: middle; } ``` 以上是几种常见的方法，具体使用哪一种取决于具体情况。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值