专栏首页九彩拼盘的叨叨叨元素的垂直居中的方法

元素的垂直居中的方法

单行文本的垂直居中

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

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 条评论
登录 后参与评论

相关文章

  • 17个场景,带你入门CSS布局

    CSS 布局本质就是控制元素的位置和大小。比如这样的布局:元素宽960px,水平居中。宽960px是大小。水平居中是位置。又如这样的布局:两个元素在一行,左侧元...

    Joel
  • 学习纲要:CSS 布局

    Joel
  • 学习前端 第6周 第3天

    Joel
  • C++@顺序容器(笔记)

    所以,当我们既要在容器中间插入数据,又想支持随机访问,就需要在链表和数组中考虑这两者之间的相对性能了。一般来说,占主导地位的操作决定了容器类型的选择。

    HeaiKun
  • Python3网络爬虫(九):使用Selenium爬取百度文库word文章

    运行平台: Windows Python版本: Python3.x IDE: Sublime text3 1 前言     大家都应该有过从百度文库下...

    Jack_Cui
  • Selenium——控制你的浏览器帮你爬虫

    大家应该都有过从百度文库下载东西的经历,对于下载需要下载券的文章,我们可以办理文库VIP;又或者使用“冰点文库”这样的下载软件,但是对于会爬虫的人来说,当然就是...

    CristianoC
  • 前端-CSS 最核心的几个概念

    本文将讲述 CSS 中最核心的几个概念,包括:盒模型、position、float等。这些是 CSS 的基础,也是最常用的几个属性,它们之间看似独立却又相辅相成...

    grain先森
  • python基础语法

    Python 中同样可以使用 map、reduce、filter,map 用于变换数组:

    周小董
  • 用 CSS 隐藏页面元素的 5 种方法

    用 CSS 隐藏页面元素有许多种方法。你可以将 opacity 设为 0、将 visibility 设为 hidden、将 display 设为 none 或者...

    疯狂的技术宅
  • 在未知大小的父元素中设置居中

    当提到在web设计中居中元素时。关于被居中的元素和它父元素的信息,你知道的越多就越容易设置。那么假如当你不知道任何信息?居中也是可设置的。

    lesM10

扫码关注云+社区

领取腾讯云代金券