【前端】CSS垂直居中的7种方法

文章目录

    • line-height
    • 绝对定位+margin:auto
    • flex
    • 绝对定位+margin:负值
    • 定位+transform
    • vertical-align:middle
    • display:table-cell
    • 思维导图

前文:【前端】CSS水平居中的6种方法_karshey的博客-CSDN博客

有很多相似的部分。

line-height

  • 适用于单行行内元素
  • 设置line-height与height相等

绝对定位+margin:auto

  • 子绝父相
  • top、left、right、bottom都是0
  • margin:auto

flex

  • display:flex
  • align-content:center

绝对定位+margin:负值

  • 子绝父相
  • 子元素top:50%:上边缘在父元素垂直居中的位置
  • margin-top:子元素高度的一半(负数):将子元素中间移动到父元素居中的位置

定位+transform

  • 父元素:相对定位
  • 子元素:相对/绝对 定位 都可以
  • 子元素top:50%,左边界到父元素的中间
  • 子元素transform: translateY(-50%);,向左移动自己的一半,使得自己的中心对准父元素的中心
  • 不需要知道子元素高度

vertical-align:middle

vertical-align 属性设置元素的垂直对齐方式。该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。

在这里插入图片描述

因此,如果我要让box在wrapper里面垂直居中,我可以在wrapper的div里面加一个div 标签,把它的高度设为100%,宽度设置为0,再给它设置vertical-align:middle,同样的给box一个vertical-align:middle样式,那么box就可以在div里面垂直居中了。

.wrapper {width: 500px;height: 500px;background-color: pink;
}.box {width: 100px;height: 100px;background-color: deepskyblue;display: inline-block;vertical-align: middle;
}.help {width: 0;height: 100%;display: inline-block;vertical-align: middle;
}
<div class="wrapper"><div class="box"></div><div class="help"></div>
</div>

利用vertical-align:middle垂直居中 - 简书 (jianshu.com)

display:table-cell

  • 要垂直居中的元素的父元素设置display:table-cellvertical-align:middle
  • 默认情况下,图片,按钮,文字和单元格都可以用vertical-align属性
  • 实现单行或多行的文本垂直居中
body {background: #ccc;
}p {display: table-cell;vertical-align: middle;background-color: pink;width: 500px;height: 200px;
}
<div><p>hello world <br />hello world <br />hello world <br />hello world</p>
</div>

也可以加上display:table,详情见:display:table-cell实现水平垂直居中 - 前端大兵 - 博客园 (cnblogs.com)

display:table和display:table-cell实现单行,多行文本垂直居中_喜欢文学的程序员的博客-CSDN博客

思维导图

在这里插入图片描述
CSS垂直居中的七个方法 - 知乎 (zhihu.com)

前端学习之垂直对齐(vertical-align)_前端垂直对齐_Endless Daydream233的博客-CSDN博客

理解:before伪类搭配vertical-align:middle实现垂直居中的原理 - 笑人 - 博客园 (cnblogs.com)

利用vertical-align:middle垂直居中 - 简书 (jianshu.com)

display:table和display:table-cell实现单行,多行文本垂直居中_喜欢文学的程序员的博客-CSDN博客

display:table-cell实现水平垂直居中 - 前端大兵 - 博客园 (cnblogs.com)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/32364.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

N皇后算法的思路是什么?

N皇后问题是经典的回溯算法问题&#xff0c;其目标是在一个NxN的棋盘上放置N个皇后&#xff0c;使得它们彼此之间不能互相攻击&#xff0c;即任意两个皇后都不在同一行、同一列或同一斜线上。 算法的思路如下&#xff1a; 使用递归函数来解决问题。递归函数的参数通常包括当前…

模仿火星科技 基于cesium+角度测量+高度测量+可编辑

1. 创建提示窗&#xff1a; 启动Cesium应用&#xff0c;地图场景将打开&#xff0c;欢迎您进入编辑模式。 在屏幕的一角&#xff0c;一个友好的提示窗将呈现&#xff0c;随着您的操作&#xff0c;它会为您提供有用的信息和指导。 2. 绘制面积&#xff1a; 轻轻点击鼠标左键&a…

Spring之Aop切面---日志收集(环绕处理、前置处理方式)--使用/教程/实例

Spring之Aop切面---日志收集&#xff08;环绕处理、前置处理方式&#xff09;--使用/教程/实例 简介系统登录日志类LoginLogEntity .java 一、环绕处理方式1、自定义注解类LoginLogAop.class2、切面处理类LogoutLogAspect.java 二、前置处理方式&#xff1a;1、自定义注解类Log…

MySQL之 show profile 相关总结

MySQL之 show profile 相关总结 MySQL官网show profile介绍&#xff1a;https://dev.mysql.com/doc/refman/8.0/en/show-profile.html 1. 简介 show profile 和 show profiles 命令用于展示SQL语句的资源使用情况&#xff0c;包括CPU的使用&#xff0c;CPU上下文切换&#xf…

【实战】 九、深入React 状态管理与Redux机制(五) —— React17+React Hook+TS4 最佳实践,仿 Jira 企业级项目(二十)

文章目录 一、项目起航&#xff1a;项目初始化与配置二、React 与 Hook 应用&#xff1a;实现项目列表三、TS 应用&#xff1a;JS神助攻 - 强类型四、JWT、用户认证与异步请求五、CSS 其实很简单 - 用 CSS-in-JS 添加样式六、用户体验优化 - 加载中和错误状态处理七、Hook&…

Docker 数据管理

文章目录 前言1、Dcoker 文件体系2、volume挂载案例2.1、挂载运行一个容器实例方法1方法2 3、volumes-from 案例4、备份/恢复数据卷5、删除数据卷 前言 为什么要有数据管理&#xff1f; 因为&#xff1a; Docker 是不提供持久化的 &#xff0c;容器是不稳定的&#xff1b;一个…

mac ssh连接另一台window虚拟机vm

vmware配置端口映射 编辑(E) > 虚拟网络编辑器(N)... > NAT设置(S)... window防火墙&#xff0c;入站规则添加5555端口 控制面板 > 系统和安全 > Windows 防火墙>高级设置>入站规则>新建规则... tips windows查看端口命令&#xff1a;netstat -ano | f…

【从零学习python 】14.Python字符串常见操作(二)

文章目录 count替换内容分隔splitrsplitsplitlinespartitionrpartition 修改大小写capitalizetitlelowerupper 空格处理1. ljust2. rjust3. center4. lstrip5. rstrip6. strip 字符串拼接字符串运算符进阶案例 count 返回 str 在 start 和 end 之间在 mystr 里面出现的次数。 …

EthereumArbitrumOptimism节点搭建

Ethereum节点搭建 Ethereum节点搭建可基于源码或基于docker。这里介绍基于docker的方式搭建。 拉取镜像 docker pull ethereum/client-go 建议将镜像源配置为阿里云的镜像源 启动容器 docker run -itd -p 8545:8545 -p 30303:30303 --name eth -v /data/eth:/root/.ethere…

java-IDEA MAVEN查看依赖树,解决jar包重复和冲突

如果这里面的依赖关系有红线,就说明有包冲突,一般都是版本不一致,可以在idea里下一个插件Maven Helper,点击install并重启IDEA 打开pom.xml文件&#xff0c;在下方会出现Dependency Analyzer&#xff0c;选择它会出现重复依赖列表&#xff0c;选择对应的依赖&#xff0c;右键红…

BI技巧丨利用Index计算半累计

在实际的业务场景中&#xff0c;特别是财务模块和库存管理模块&#xff0c;经常需要我们针对每个月的期初期末进行相关指标计算&#xff0c;这也是我们之前曾经提到的Calculate基础应用——半累计计算。 现在我们也可以通过微软新推出的Index开窗函数来解决这一问题。 INDEX函…

Mapbox加载天地图CGCS2000矢量瓦片地图

1.背景 最近在做天地图的项目&#xff0c;要基于MapBox添加CGCS2000矢量切片数据&#xff0c;但是 Mapbox 只支持web 墨卡托&#xff08;3857&#xff09;坐标系的数据。Github有专业用户修改了mapbox-gl的相关代码&#xff0c;支持CGCS2000的切片数据加载&#xff0c;并且修改…

dji uav建图导航系列(一)建图

文章目录 1、uav + rplidir雷达1.2、思岚激光雷达1.3、dji uav的launch文件2、cartographer激光建图2.1、启动文件2.2、config修改2.3、建图过程3、融合odom+laser建图1、uav + rplidir雷达 思岚激光雷达frame为base_laser_link, 无人机frame为base_footprint。 文件uav_lid…

【Python】同步、异步、堵塞、非堵塞、回调

原文作者&#xff1a;我辈李想 版权声明&#xff1a;文章原创&#xff0c;转载时请务必加上原文超链接、作者信息和本声明。 文章目录 一、Python中的同步异步二、Python中的堵塞非堵塞三、Python中的回调四、异步编程 一、Python中的同步异步 在 Python 中&#xff0c;同步和…

【OS】操作系统中,页框/页帧见解

文章目录 页框大小的取决因素页框大小的查询不同大小的页框&#xff0c;适用于哪些场景&#xff1f; 页框大小的取决因素 页框&#xff08;Page Frame&#xff09;是指操作系统中用于存储页面的物理内存块&#xff0c;其大小通常由操作系统的设计和硬件架构决定。在现代计算机…

手动实现 Spring 底层机制 实现任务阶段一编写自己 Spring 容器-准备篇【2】

&#x1f600;前言 手动实现 Spring 底层机制的第2篇 实现了任务阶段一编写自己 Spring 容器-准备篇【2】 &#x1f3e0;个人主页&#xff1a;尘觉主页 &#x1f9d1;个人简介&#xff1a;大家好&#xff0c;我是尘觉&#xff0c;希望我的文章可以帮助到大家&#xff0c;您的…

docker 删除镜像文件

docker 容器里面太多镜像&#xff0c;D盘满了 四 查看和移除镜像 1 查看镜像 docker images 2 移除镜像命令 docker rmi 镜像名称 # 只输入前四位即可 五 实际有效操作 清除所有不使用的资源 docker system prune 这个命令将会删除所有不使用的镜像、容器和数据卷等资…

js 动态设置transformOrigin

transformOrigin属性用于指定元素变换的原点。 // 获取要设置的元素 const element document.getElementById(your-element-id);// 设置transformOrigin属性 element.style.transformOrigin 50% 50%; // 以元素中心为原点// 或者使用变量来设置 const x 0; // x坐标 const …

后端进阶之路——深入理解Spring Security配置(二)

前言 「作者主页」&#xff1a;雪碧有白泡泡 「个人网站」&#xff1a;雪碧的个人网站 「推荐专栏」&#xff1a; ★java一站式服务 ★ ★前端炫酷代码分享 ★ ★ uniapp-从构建到提升★ ★ 从0到英雄&#xff0c;vue成神之路★ ★ 解决算法&#xff0c;一个专栏就够了★ ★ 架…

python操作数据库

python操作数据库 首先安装数据插件 pip install pymysqlfrom pymysql import Connection # 引入数据库第三方包# 创建链接 conn Connection(host"localhost", # 主机名ipport3306,user"root",# 用户名password"123456" # 密码 )print(con…