使用 CSS 实现垂直居中的8种方法
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对齐的方法是寻找兄弟元素中最高的元素作为参考。
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,这种方法适用于子元素为单行文本的情况。
使用 CSS 实现垂直居中的8种方法相关推荐
- CSS实现垂直居中的7种方法
CSS实现垂直居中的7种方法 1.设定行高(line-height) 2.设置伪元素::before 3.absolute + transform 4. 设置绝对定位 5.设置display:flex ...
- java文本框字体垂直居中_实现css文字垂直居中的8种方法
注:以下demo都只是针对现代浏览器所做,未兼容低版本的IE以及其他非主流浏览器. 实现css文字垂直居中的8种方法如下: 1.使用绝对定位和负外边距对块级元素进行垂直居中 css垂直居中效果: cs ...
- html怎么把元素垂直居中显示,分享html css元素垂直居中的几种方法
元素垂直居中的几种方法: 方法一:设置height和line-height 在CSS中,line-height 属性设置两段段文本之间的距离,也就是行高,如果我们把一段文本的line-height设置 ...
- 纯CSS实现垂直居中的几种方法
垂直居中是布局中十分常见的效果之一,为实现良好的兼容性,PC端实现垂直居中的方法一般是通过绝对定位,table-cell,负边距等方法.有了css3,针对移动端的垂直居中就更加多样化. 方法1:tab ...
- 实现css文字垂直居中的8种方法
CSS可以轻易实现文字的水平居中,但有时我们需要文字垂直居中,除了表格可以实现这种CSS文字垂直居中以外,还有其它几种方法可以做到 https://www.jb51.net/article/17825 ...
- CSS中垂直居中的七种方法
前言: 我们在编辑一个版面,通常都会用到水平居中和垂直居中来设计,而水平居中很好处理,不外乎就是设定margin:0 auto:或是text-align:center:,就可以轻松解决掉水平居中的问题 ...
- 使用 CSS 实现垂直居中的5种方法
在日常开发中,经常需要元素垂直居中或者水平居中,css水平垂直居中方法有很多种,下面列举几种常用的方法: <div class="parent"><div cla ...
- CSS实现垂直居中的5种方法
方法一 这个方法把一些 div 的显示方式设置为表格,因此我们可以使用表格的 vertical-alignproperty 属性. <div id="wrapper"> ...
- CSS水平垂直居中的几种方法
我们都知道,固定宽高的 div 在网页中水平垂直居中很简单,相信大家也很容易的写出来,但是不固定宽高的 div 如何水平垂直居中呢?我们在网页布局,特别是手机等 web 端网页经常是不固定宽高的 di ...
最新文章
- 为什么机器学习模型在生产中会退化?
- 上下文 及 执行上下文
- ajax头文件报错,AJAX的CSRF保护
- java基础(四) java运算顺序的深入解析
- C和指针之函数之实现阶乘和斐波那契数(递归和非递归)
- 前端学习(2860):简单秒杀系统学习之前端优化
- Bootstrap居中显示
- 数据型驱动风控有什么内容?从蚂蚁借呗与花呗谈起~
- Django学习笔记之form组件的局部钩子和全局钩子
- 【Windows】VMware虚拟机安装Windows 10 教程
- 谱瑞PS8625替代方案|PS8622替代方案|高性价比EDP转LVDS转接板方案CS5211设计开发
- 二叉搜索树,就这,就这啊。
- SQL Server 索引碎片和填充因子
- 【JavaEE】网络基本概念与协议分层手术刀剖析
- 网站微信扫码支付流程
- ssh:ssh-agent、ssh-add
- 基于Java+MySQL 实现(Web)动态人脸识别的认证识别系统【100010315】
- Ae:形状图层的内容添加
- “大数据金融”与“大数据安全”双剑合璧
- 运营商大数据的发展现状和趋势
热门文章
- 勒索病毒发生变种 新文件名将带有“.UIWIX”后缀
- [oeasy]python0019_ 打包和解包_struct_pack_unpack
- 人工智能中的算法难吗?AI算法构建有多难?
- 这个小姐姐说:你之前所知道的区块链可能都是错的
- Pycharm、IDEA、WebStorm 工具使用过程中出现 Server‘s certificate is not trusted 提示框的问题
- 华为手机桌面计算机怎么恢复出厂设置密码,华为手机恢复出厂设置密码多少呢?...
- centos - 查看程序运行状态、后台运行程序、回调后台程序、监控(tomcat和java程序为例)
- 给自己的软件添加参数配置文件*.ini
- ajax上传图片、下载图片
- Java8之动态代理