CSS四中方法实现垂直居中

巴扎黑

发布时间：2017-09-07 09:14:19

2242人浏览过

来源于php中文网

原创

这篇文章给大家整理四种css实现垂直居中效果，思路明了非常不错，具有参考借鉴价值，需要的朋友参考下吧

行高line-height实现单行文本垂直居中

以前一直认为单行文本垂直居中要将高度和行高设置成相同的值，但高度其实没必要设置。实际上，文本本身就在一行中居中显示。在不设置高度的情况下，行高撑开高度。

测试文字

设置vertical-align:middle实现垂直居中

【1】设置父元素的display为table-cell

立即学习“前端免费学习笔记（深入）”；

通过为table-cell元素设置vertical-align:middle，可使其子元素均实现垂直居中。这和表格里单元格的垂直居中是类似的

[注意] 若要IE7-浏览器支持，则可以将其改为

表格结构

[注意] 设置为table-cell的p不能使用浮动或绝对定位，因为浮动或绝对定位会使元素具有块级元素特性，从而丧失了table-cell元素具有的垂直对齐的功能。

若需要浮动或绝对定位处理，则需要外面再套一层p。

我是有点长的有点长的有点长的有点长的测试文字

这里写图片描述

【2】若子元素是图片，通过设置父元素的行高来代替高度，且设置父元素的font-size为0。

vertical-align:middle的解释是元素的中垂点与父元素的基线加1/2 父元素中字母X的高度对齐。由于字符X在em框中并不是垂直居中的，且各个字体的字符X的高低位置不一致。

所以，当字体大小较大时，这种差异就更明显。当 font-size为0时，相当于把字符X的字体大小设置为0，于是可以实现完全的垂直居中。

@@##@@

CSS四中方法实现垂直居中

【3】通过新增元素来实现垂直居中的效果

新增元素设置高度为父级高度，宽度为0，且同样设置垂直居中vertical- align:middle的inline-block元素。由于两个元素之间空白被解析，所以需要在父级设置font-size:0，在子级再将 font-size设置为所需值；若结构要求不严格，则可以将两个元素一行显示，则不需要设置font-size:0。

MATLAB与VB混合编程技术研究 WORD版

本文档主要讲述的是MATLAB与VB混合编程技术研究；着重探讨了在VB应用程序中集成MATLAB实现程序优化的四种方法，即利用Matrix VB、调用DLL动态链接库、应用Active自动化技术和动态数据交换技术,并分析了集成过程中的关键问题及其基本步骤。这种混合编程实现了VB的可视化界面与MATLAB强大的数值分析能力的结合。希望本文档会给有需要的朋友带来帮助；感兴趣的朋友可以过来看看

下载

我是比较长的比较长的多行文字

思路三：通过绝对定位实现垂直居中

【1】若子元素不定高，使用top50%配合translateY(-50%)可实现居中效果。

translate函数的百分比是相对于自身高度的，所以top:50%配合translateY(-50%)可实现居中效果。

[注意] IE9-浏览器不支持；

[注意]若子元素的高度已知，translate()函数也可替换为margin-top: 负的高度值。

测试文字

【2】若子元素定高，结合绝对定位的盒模型属性，实现居中效果

测试文字

在水平居中对齐中，元素外层套一层p并设置absolute，元素设置负margin-left或者relative的负left属性，可以实现水平居中的效果。但由于margin是相对于包含块宽度的，这样margin-top:-50%得到的是宽度而不是高度的-50%，所以不可行；对于relative的百分比取值而言，在包含块高度为auto的情况下，chrome、safari和IE8+浏览器都不支持设置元素的百分比top值，所以也不可行。

思路四：使用弹性盒模型flex实现垂直居中

[注意] IE9-浏览器不支持

【1】在伸缩容器上设置侧轴对齐方式align-items: center

测试文字

【2】在伸缩项目上设置margin: auto 0

测试文字

css浮动导航菜单点击区域小怎么办_调整padding或增加clear

css 定位布局为何不适合整体页面结构_通过维护成本角度说明

css如何让边框颜色平滑过渡_利用transition-border-color实现

如何在项目中实现自定义滚动条_通过CSS修改网页滚动条样式

css如何让flex容器子元素均分宽度_结合flex属性实现等分

相关专题

java入门学习合集

本专题整合了java入门学习指南、初学者项目实战、入门到精通等等内容，阅读专题下面的文章了解更多详细学习方法。

2026.01.29

java配置环境变量教程合集

本专题整合了java配置环境变量设置、步骤、安装jdk、避免冲突等等相关内容，阅读专题下面的文章了解更多详细操作。

2026.01.29

java成品学习网站推荐大全

本专题整合了java成品网站、在线成品网站源码、源码入口等等相关内容，阅读专题下面的文章了解更多详细推荐内容。

2026.01.29

Java字符串处理使用教程合集

本专题整合了Java字符串截取、处理、使用、实战等等教程内容，阅读专题下面的文章了解详细操作教程。

2026.01.29

Java空对象相关教程合集

本专题整合了Java空对象相关教程，阅读专题下面的文章了解更多详细内容。

2026.01.29

clawdbot ai使用教程保姆级clawdbot部署安装手册

Clawdbot是一个“有灵魂”的AI助手，可以帮用户清空收件箱、发送电子邮件、管理日历、办理航班值机等等，并且可以接入用户常用的任何聊天APP，所有的操作均可通过WhatsApp、Telegram等平台完成，用户只需通过对话，就能操控设备自动执行各类任务。

2026.01.29

clawdbot龙虾机器人官网入口 clawdbot ai官方网站地址

clawdbot龙虾机器人官网入口:https://clawd.bot/,clawdbot ai是一个“有灵魂”的AI助手，可以帮用户清空收件箱、发送电子邮件、管理日历、办理航班值机等等，并且可以接入用户常用的任何聊天APP，所有的操作均可通过WhatsApp、Telegram等平台完成，用户只需通过对话，就能操控设备自动执行各类任务。

2026.01.29

Golang 网络安全与加密实战

本专题系统讲解 Golang 在网络安全与加密技术中的应用，包括对称加密与非对称加密（AES、RSA）、哈希与数字签名、JWT身份认证、SSL/TLS 安全通信、常见网络攻击防范（如SQL注入、XSS、CSRF）及其防护措施。通过实战案例，帮助学习者掌握如何使用 Go 语言保障网络通信的安全性，保护用户数据与隐私。

2026.01.29