元素的垂直居中的方法

单行文本的垂直居中

只需让元素的行高的值设置成和高度的值一样即可。如

height: 30px;
line-height: 30px;

高度不固定的元素的垂直居中

使用 Flex

父元素加

display: flex; 
align-items: center;

然后就搞定了,很简单吧。

使用 table 布局

父元素加

display: table; /*让元素以表格形式渲染*/
height: 200px; /* 需要定宽,定高 */
width: 100px;

子元素加

display: table-cell;/*让元素以表格的单元素格形式渲染*/
vertical-align: middle;

用绝对定位

父元素使用定位

position: relative; // absolute,fixed 也可以。只要不是 static。

子元素

position: absolute;
top: 50%;
transform: translateY(-50%);

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏web

各种水平垂直居中

811
来自专栏小壮和前端

键盘事件 和键码

1661
来自专栏小筱月

js、jQuery 获取文档、窗口、元素的各种值

浏览器当前窗口文档body的宽度: document.body.clientWidth;(仅仅是body的width) 浏览器当前窗口文档body的高度: do...

2362
来自专栏.Net移动开发

.Net语言 APP开发平台——Smobiler学习日志:如何设置页面的title

其中包括Image属性(窗体图标)、BackColor属性(窗口标题栏背景色)、TextColor属性(窗口标题栏文本颜色)和TextAlign属性(窗体标题栏...

955
来自专栏一个小程序员的成长笔记

CSS3弹性盒布局

使用自适应的窗口弹性盒布局 可以使div总宽度等于浏览器宽度,而且可以随着浏览器的改变而改变。 1 <!DOCTYPE html> 2 <html la...

5507
来自专栏前端萌媛的成长之路

元素垂直居中和水平居中的方法

1492
来自专栏前端知识分享

第48天:垂直滚动条

901
来自专栏Java后端技术

HTML标记语法之表格元素

8.直列化格式:<colgroup><colgroup>(<col>与<colgroup>的功能完全一样)

2281
来自专栏HTML5学堂

SVG - 基本的SVG属性

SVG - 基本的SVG属性 HTML5学堂:在前一篇文章当中,我们讲解了SVG的基本知识,并且为大家介绍了如何在html文件当中书写SVG代码。今天我们具体讲...

39517
来自专栏木子昭的博客

css布局-实现左中右布局的5种方式

? <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta ...

3668

扫码关注云+社区

领取腾讯云代金券