CSS垂直居中的8种方法

最新推荐文章于 2024-07-26 08:00:00 发布
最新推荐文章于 2024-07-26 08:00:00 发布
阅读量143 收藏
点赞数
分类专栏： 前端 文章标签： css
原文链接：https://www.cnblogs.com/clj2017/p/9293363.html
版权

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

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

  3. 通过伪元素:before实现CSS垂直居中。为父元素添加伪元素:before，使得子元素实现垂直居中。

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

  5. 通过隐藏节点实现CSS垂直居中。创建一个隐藏节点#hide，使得隐藏节点的height值为剩余高度的一半即可。

  6. 已知父元素高度通过transform实现CSS垂直居中。给子元素的position:relative，再通过translateY即可定位到垂直居中的位置。

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

  8. 通过line-height实现CSS垂直居中。设置子元素的line-height值等于父元素的height，这种方法适用于子元素为单行文本的情况。

Francis0225
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS 垂直居中五种实现方法
12-29
利用 CSS 来实现对象的垂直居中有许多不同的方法，比较难的是选择那个正确的方法。我下面说明一下我看到的好的方法和怎么来创建一个好的居中网站。 使用 CSS 实现垂直居中并不容易。有些方法在一些浏览器中无效。...
CSS 垂直居中的5种实现方法
12-12
利用 CSS 来实现对象的垂直居中有许多不同的方法，比较难的是选择那个正确的方法。我下面说明一下我看到的好的方法和怎么来创建一个好的居中网站。   使用 CSS 实现垂直居中并不容易。有些方法在一些浏览器中无效...
css 居中问题的总结
qq_43889848的博客
05-15 2240
1.css让浮动的盒子水平居中 解决方法： 给浮动的盒子加一个父盒子，设置宽度跟浮动盒子一样大小，并且overflow:hidden; 设置该盒子为margin: 0 auto; <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> *{ padding: 0; margin:
CSS实现垂直居中的5种方法
weixin_30567471的博客
05-26 453
利用 CSS 来实现对象的垂直居中有许多不同的方法，比较难的是选择那个正确的方法。我下面说明一下我看到的好的方法和怎么来创建一个好的居中网站。 使用 CSS 实现垂直居中并不容易。有些方法在一些浏览器中无效。下面我们看一下使对象垂直集中的5种不同方法，以及它们各自的优缺点。(可以看看测试页面，有简短解释。) 方法一 这个方法把一些div的显示方式设置为表格，因此我们可以使用...
使用 CSS 实现垂直居中的8种方法
热门推荐
秋天，黄叶坠地，凉风有信。
03-25 10万+
​​​​​​CSS垂直居中的8种方法 目录 ​​​​​​CSS垂直居中的8种方法 1、通过verticle-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垂直居中的几种方法
m0_72838183的博客
10-04 7419
推荐大家几种常见的css垂直居中的方法，便于不同的场景使用，也方便大家面试时有更多的思路，如果大家有更好更多的方法，欢迎留言讨论
16种CSS水平垂直居中方法
weixin_45709829的博客
03-22 3万+
16种css水平垂直居中方法以及应用（文字、图片） 一、垂直居中 1、行内元素 基本思想：单行文本子元素line-height 值为父元素 height 值 .parent { height: 200px; } .son { line-height: 200px; } 2、块级元素 2.1行内块级元素 基本思想：元素是行内块级，使用display: inline-block, vertical-align: middle+伪元素处于容器中央 兼容性：支持IE7 .parent::afte
CSS设置水平垂直居中的方法（ 7种 ）
大剑师兰特的GIS世界
03-19 1485
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常用水平垂直居中的几种方法
qq_33721778的博客
12-28 2万+
CSS水平垂直居中一、利用margin:auto二、利用position: absolute三级目录 一、利用margin:auto 元素有宽度和高度时，利用margin:auto设置元素水平垂直居中： HTML代码如下： <div class="div1"> <div class="center"></div> </div> CSS代码如下： .div1 { background-color: #eee; width: 200px; hei
【前端】CSS垂直居中的7种方法
karshey的博客
08-11 1252
因此，如果我要让box在wrapper里面垂直居中，我可以在wrapper的div里面加一个div。vertical-align 属性设置元素的垂直对齐方式。该属性定义行内元素的。样式，那么box就可以在div里面垂直居中了。相对于该元素所在行的基线的垂直对齐。，同样的给box一个。
实现css文字垂直居中的8种方法
10-15
标题提到的"实现css文字垂直居中的8种方法"涵盖了多种不同的技术，适用于不同场景。以下是对这些方法的详细解释： 1. **绝对定位和负外边距**： 这种方法适用于已知元素高度的情况。通过将元素设置为绝对定位，...
CSS实现垂直居中的几种方法
09-25
本文将介绍几种有效的CSS垂直居中方法，以便开发者可以根据具体场景选择适合的方法。 1. 表格单元格方式 这种方法通过将容器设置为表格样式，然后将子元素设置为表格单元格并应用`vertical-align: middle`来实现...
CSS实现图片边框酷炫效果
流绪@微梦
07-26 1260
我们在浏览一些网页时，经常会看到一些好看酷炫的元素边框效果（如下图），那么这些效果是怎么实现的呢？我们知道，一般的边框，要么是实线，要么是虚线（点状，短横线），但是遇到一些特殊的边框，传统边框就束手无策了。遇到这种边框，不妨考虑下用 border-image。border-image属性可以给边框添加背景图片，实现图片边框效果。在css中，可以使用border-image属性设置图片边框，只需要给元素添加border-image样式即可。
CSS学习笔记
ngczx的博客
07-23 630
CSS学习笔记
qt练习控件label控件-lineEdit控件样例代码
最新发布
07-30
qt练习控件label控件-lineEdit控件样例代码
【JCR一区级】麻雀搜索算法SSA-CNN-LSTM-Attention故障诊断分类预测【含源码 5689期】.zip
07-30
CSDN海神之光上传的全部代码均可运行，亲测可用，直接替换数据即可，适合小白； 1、代码压缩包内容 主函数：Main .m； 数据； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2019b；若运行有误，根据提示修改；若不会，可私信博主； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开除Main.m的其他m文件； 步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可私信博主或扫描博主博客文章底部QQ名片； 4.1 CSDN博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作 智能优化算法-CNN-LSTM-Attention分类系列程序定制或科研合作方向： 4.4.1 遗传算法GA/蚁群算法ACO-CNN-LSTM-Attention分类 4.4.2 粒子群算法PSO/蛙跳算法SFLA-CNN-LSTM-Attention分类 4.4.3 灰狼算法GWO/狼群算法WPA-CNN-LSTM-Attention分类 4.4.4 鲸鱼算法WOA/麻雀算法SSA-CNN-LSTM-Attention分类 4.4.5 萤火虫算法FA/差分算法DE-CNN-LSTM-Attention分类
详解MATLAB Simulink通信系统建模与仿真
07-30
第1 章 MATLAB 基础与通信系统仿真 1.1 MATLAB 简介 1.2 MATLAB 程序设计 1.3 通信系统仿真 第2 章 Simulink 仿真基础 2.1 Simulink 简介 2.2 Simulink 工作环境 2.3 Simulink 仿真的基本方法 2.4 创建自己的模块库 2.5 S-函数的编写 第3 章 通信信号与系统分析 3.1 离散信号和系统 3.2 Fourier 分析 3.3 带通信号的低通等效 3.4 随机信号分析 第4 章 信道 4.1 加性高斯白噪声信道 4.2 多径衰落信道 第5 章 模拟调制 5.1 幅度调制 5.2 角度调制 第6 章 数字基带传输 6.1 概述 6.2 二进制基带信号传输 6.3 基带PAM 信号传输 6.4 带限信道的信号传输 第7 章 数字信号载波传输 7.1 概述 7.2 载波幅度调制（PAM） 7.3 载波相位调制（PSK） 7.4 正交幅度调制（QAM） 7.5 载波频率调制（FSK） 第8 章 信道编码和交织 8.1 概述 8.2 线性分组码
css垂直居中的几种方法
06-28
下面介绍几种常用的CSS垂直居中的方法。 一、利用flex布局实现垂直居中 父元素设置display:flex; align-items:center; justify-content:center; 实现子元素的垂直居中。 二、利用绝对定位实现垂直居中 将子元素...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值