admin 管理员组文章数量: 1087139
2024年2月23日发(作者：linux 手册)
注：此文由断指鹤搜集而来，都在高级浏览器下测试过，但不敢保证IE8以下会不会出现问题。
页面设计中垂直居中几种实现方式：
垂直居中主要用两种情况，第一种是内外元素的高度全定，这种情况处理起来相对简单，方法也很多；第二种是外高度定了，但内高度不定，这种情况处理起来相对困难。下面，便介绍下两种情况下的解决方案。
内外元素高度全部确定的情况
1、line-height与height值设相同值。
此种方法最简单，但局限性很大，只有单行文本才能够适用。具体示例如下：
CSS写法：
.vertical{
}
HTML写法：
此方法优点：适合在所有浏览器，没有足够空间时，内容不会被切掉。
此方法缺点：仅适合应用在文本和图片上，并且这种方法，当你文本不是单行时，效果极差，差到让你感到恶心。
2、给父容器设置相对定位，然后将本元素也设置为相对定位，topheight: 100px;
line-height:100px;
设置成50%，margin-top设置成：height/2，具体示例如下：
CSS代码：
.out{
position:relative;
width：400px;
height: 400px;
border: solid 1px gray;
}
. .vertical{
height: 100px;
width: 100px;
border: solid 1px gray;
position:relative;
top:50%;
margin-top:50px;
}
HTML代码：
此方法优点：能够在多浏览器下运行，适用任何定高的div。
此方法缺点：由于固定死元素的高度，致使没有足够的空间，当内容超过容器的大小时，要么会消息，要么会出现滚动条（如果元素在body内，当用户缩小浏览器窗口时，body的滚动条将不会出现）。
3、这种方法有点新意，用这种方法你需要在居中元素前面放一个空的
CSS代码：
html,body {height: 100%;}
#floater{
}
#content {
}
HTML代码：
clear:both;/*清除浮动*/
height: 240px;
position: relative;
float:left;
height:50%;/*相对于父元素高度的50%*/
margin-bottom: -120px;/*值大小为居中元素高度的一半*/
此方法优点：兼容所有浏览器。
此方法缺点：元素高度需确定，内容不够时，若设置overflow属性，元素会被切掉，或是出现滚动条；
内外元素高度全部确定实现方法挺多的，这里就不一一介绍了，下面介绍下外高度定，内高度不定的情况。
外层元素高度确定，内层高度不确定的情况
1、使用div的模拟表格效果，也就是说将多个
CSS代码：
#container {
height: 300px;
display: table;/*让元素以表格形式渲染*/
}
#content {
display:table-cell;/*让元素以表格的单元素格形式渲染*/
vertical-align: middle;/*使用元素的垂直对齐*/
}
HTML代码：
此方法优点：没有高度限制；
此方法缺点：这种方法只适合现代浏览器，在IE6-7下无法正常运行。
5、这种方法是采用的display:inline-block，然后借助另一个元素的高度来实现居中
CSS代码：
#parent {
height: 500px;/*定义高度，让线盒型div#extra有一个参照物，可以是固定值，也可以是百分比*/
border: 1px solid red;
}
#vertically_center{
display: inline-block;
width: 100%;
vertical-align: middle;
border: 1px solid #f00;
}
#extra {
display: inline-block;/*把元素转为行内块显示*/
vertical-align: middle;/*垂直居中*/
height: 100%; /*设置线盒型为父元素的100%高度*/
}
HTML代码：
I am vertically centered!
此方法优点：可自适应高度，简单易懂；
此方法缺点：需一个额外的标签，且IE6-7不支持block-inline属性，所以其在IE6-7下不起作用；
6、用line-height来定义最外层的行高（例如：原来的height为200px，此方法将line-height设置为200px，不给height设值）
CSS代码：
.vertical-outer{
}
.vertical-inner{
line-height: 24px;
vertical-align: middle;
display: inline-block;
font-size: 18px;
line-height: 150px;
border: 1px dashed #ccc;
width: 300px;
margin-bottom: 6px;
}
HTML代码：
this is a test this is a test this is a test
this is a test this is a test
此方法优点：可自适应高度,简单易懂
此方法缺点：只支持HTML，且需要一个margin-bottom的修正值，为内部元素行高的四分之一。
以上便是常见的用CSS实现元素居中的方法了，当然，面对一些特殊问题，一些难处理的垂直居中，可以考虑用JS来处理。
版权声明：本文标题：CSS实现垂直居中的几种实现方式 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://roclinux.cn/p/1708637287a528371.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
更多相关文章
微信内置浏览器调试模式
1.下载devtools_resources.pak文件，如果不能下载，私信我 解压之后，放在C:UsersfeiduAppDataRoamingTencent
windows系统下设置redis开机自启动的方法教程
转自https:www.2ctodatabase201807762681.html 一、下载windows版本的Redis 去官网找了很久，发现原来在官网上可以下载的windows版本的࿰
YOLOv2在Windows下的配置方法
研究深度学习数月，从普通的CNN（mnist、cifar10），到进阶的Fast RCNN、Faster RCNN，到现在的YOLO、YOLO2，被AI界大神们的思维能力深深折服。如下是是YOLOv2在Windows下的配置方法，记录下
windows10组策略关闭系统更新方法
windowsR，打开运行窗口，并输入services.msc 向下滑动，找到Windows Update 双击打开，然后按照图片进行操作
Windows10 Ubuntu18.04 双系统下修复GRUB引导（亲测当boot-repair工具无效时，该方法完美解决）
Windows10 Ubuntu18.04 双系统下修复GRUB引导（亲测当boot-repair工具无效时，该方法完美解决） 0.准备条件1.问题描述：
windows10下的浏览器userAgent
windows10 下各浏览器userAgent 版本号自行理解 8 -。- 浏览器userAgentChromeMozilla5.0 (Windows NT 10.0; WOW64) AppleWebKit537.36 (KHTML
Windows 10中关闭系统自动更新的多种方法
这里介绍6种关闭Win10自动更新的方法，分别是通过Windows设置、Windows Update服务、本地组策略编辑器、任务计划程序、注册表编辑器来关闭Win10自动更新。 ✔ 方法1. Windows设置 要
Word “当前页“ 与 “前一页“ （含部分内容）间有大半页空白，删除空白方法
鼠标光标选中需要向上移的句子，右键点击“段落”，然后在跳出的窗口中按照“换行和分页”中的红色方框内取消勾选后，点击确定即可。
Windows 11 BitLocker 加密 | 性能影响关闭方法密钥找回
注：本文为 “windows 11 BitLocker” 相关文章合辑。 未整理去重。 BitLocker：Windows 11 系统自带的 BitLocker 加密关闭方法 周末我要去钓鱼于
如何在 Windows 上安装 Apple 地图？只需要浏览器就能搞定
Apple 地图（Apple Maps）是苹果公司推出的一款地图应用程序，旨在为 iOS、iPadOS 和 MacOS 用户提供精确的地图服务和导航功能。自 2012 年推出
最新版MySQL 8.0.22（Windows 64位）下载安装详细方法
最新版MySQL 8.0.22（Windows 64位）下载安装详细方法 前言一、MySQL 8.0.22官网下载二、设置环境变量三、创建初始化文件mysql.ini三、对MySQL进行初始化四、
win系统服务器白名单,win10系统如何添加白名单 windows10下添加白名单的方法
我们都知道Win10系统在出厂时自带有安全监测中心，该监测中心可以保护电脑安全，但是同时也给用户带来一些麻烦，Win10系统毕竟不是所有的应用和文件都能识别ÿ
winhex搜索16进制_WinHex软件使用方法与磁盘分析方法
数据的逻辑运算 逻辑或：逻辑加运算，运算符：、OR等，当输入变量有一个满足时（例如，为1有效
2025年最全面的18种C盘清理方法，轻松释放50G以上空间，可以收藏备用！
嘿，小伙伴们！是不是感觉自家的 Windows 电脑，C 盘就像个无底洞，明明分了不小的空间，用着用着就飘红告急ÿ
xp无法访问win7计算机,解决XP不能访问win7共享文件的方法
很多人在工作过程中需要将一些文件和信息与同事共享，以方便相互学习和工作上的交流，然而有些用户却发现安装XP系统的电脑根本无法访问Windows7的共享文件夹，而且有些虽然可以
计算机无法安装蓝牙驱动,win10蓝牙驱动装不了怎么办_win10电脑蓝牙驱动无法安装处理方法-win7之家...
如今，大多数用户使用的win10电脑外接的设备都喜欢采用蓝牙模式，其中操作起来也是相当方便的，但是要想正常的进行蓝牙连接，就需要保证win10系统中安装
怎么设置u盘启动_设置u盘启动的两种方法(小白看了也懂)
怎么设置u盘启动？在用U盘安装系统之前，我们需要将电脑开机并设置u盘启动才能进入pe安装系统，当然提前是制作U盘启动盘。下面小编就教大家设置u盘启动多种方法教程。 怎么设
照相机数据恢复方法
相机内存卡数据丢失需要恢复的话，一定要把内存卡从相机取下来，然后用读卡器插到电脑上。照相机数据恢复方法再用数据恢复软件对这个内存卡进行扫描恢复。工具软件：光明数据恢复软件
MAC系统如何连接Windows共享文件？MAC系统连接Win共享文件的方法
MAC系统如何连接Windows共享文件？MAC系统和Windows是两个不同的系统，有时候我们想要MAC系统访问Windows共享文件，那么有什么方法呢࿰
Word页眉横线删除全攻略：5种实用方法详解
Word页眉横线删除全攻略：5种实用方法详解 在日常办公中，Word文档的页眉横线常常成为困扰用户的细节问题。这条看似简单的横线，在正式文档中可能影响排版美观，在简历或合同中更可能破坏整体专业性。本文将系统梳理5种高效解决方案，从临时处理
推荐文章
javascript - How to convert a UTC time to local time - Stack Overflow
dom - window.open not loading address in Safari on iOS - Stack Overflow
android - How to open mobile app after clicking a button in mobile browser (using javascriptreact) [Deep Linking] - Stack Overfl
Windows离线部署vllm
windows 7 安装 sam-ba at91 usb to serial converter 驱动不成功的解决
热门文章
-
数据恢复方法
20天前 -
Word分节符深度解析与应用技巧
20天前
最新文章
-
开机、注销后自动登录Windows
1小时前
发表评论