CSS实现完美垂直居中
作者：ruxpinsp1 来源：蓝色理想 发布时间：2007-09-22 09:29:00
标签：居中,垂直居中,css
之前看到很多人一直都问这个问题，不过当时我没当一回事，因为在 CSS 中要垂直居中，多数是在有高度的情况下，或者容器高度不定的情况下才用，看上去比较舒服，而且实现的方法也不少，不一定要拘泥于和 table 布局一样。不过最近有人问了几个例子，看来对此的需求还不少。现在就把我经验拿出来分享一下，希望大家鼓鼓掌。
首先，要有一个概念：凡是 table 布局可以实现的，CSS 一定可以实现。CSS 可以实现的，table 未必能做到。
现在来几个例子：
一、单行内容的居中
只考虑单行是最简单的，无论是否给容器固定高度，只要给容器设置 line-height 和 height，并使两值相等，再加上 over-flow: hidden 就可以了
.middle-demo-1{
height: 4em;
line-height: 4em;
overflow: hidden;
}
优点：
1. 同时支持块级和内联极元素
2. 支持所有浏览器
缺点：
1. 只能显示一行
2. IE中不支持<img>等的居中
要注意的是：
1. 使用相对高度定义你的 height 和 line-height
2. 不想毁了你的布局的话，overflow: hidden 一定要
为什么？
请比较以下两个例子：
上一个高度是用的绝对单位px，并且没有隐藏溢出，下一个高度用的单位是相对单位em，并且隐藏了溢出。如果你的浏览器支持放大字体，那么尽情地放大字体，看看会出现什么效果。
二、多行内容居中，且容器高度可变
也很简单，给出一致的 padding-bottom 和 padding-top 就行
.middle-demo-2{
padding-top: 24px;
padding-bottom: 24px;
}
优点：
1. 同时支持块级和内联极元素
2. 支持非文本内容
3. 支持所有浏览器
缺点：
容器不能固定高度
0
投稿猜你喜欢
本文实例讲述了Python数据分析之双色球统计两个红和蓝球哪组合比例高的方法。分享给大家供大家参考，具体如下：统计两个红球和蓝球，哪个组合最- 需要在程序中使用二维数组，网上找到一种这样的用法： #创建一个宽度为3，高度为4的数组#[[0,0,0], # [0,0,0],#
- OpenAI，由诸多硅谷大亨联合建立的人工智能非营利组织。2015年马斯克与其他硅谷科技大亨进行连续对话后，决定共同创建OpenAI，希望能
- 本文实例为大家分享了python+opencv识别图片中足球的方法，供大家参考，具体内容如下先补充下霍夫圆变换的几个参数知识：dp，用来检测
- 场景游戏里有很多关卡（可能有几百个了），理论上每次发布到外网前都要遍历各关卡看看会不会有异常，上次就有玩家在打某个关卡时卡住不动了，如果每个
- 一、集合的基本信息集合：集合是无序的，集合中的元素是唯一的，集合一般用于元组或者列表中的元素去重。格式：set1 = set()或a={值1
- 前言如何通过python实现邮件解析？邮件的格式十分复杂，主要是mime协议，本文主要是从实现出发，具体原理可以自行研究。一、安装通过mai
- 什么是LSTM1、LSTM的结构我们可以看出，在n时刻，LSTM的输入有三个：当前时刻网络的输入值Xt；上一时刻LSTM的输出值ht-1；上
- 1.配置环境操作系统：Ubuntu20.04CUDA版本：11.4Pytorch版本：1.9.0TorchVision版本：0.7.0IDE
- <％ dim conn,mdbfile mdbfile=server.mappath("数据库名称.mdb") s
- 程序的功能有了个大体的框架，其实可以自己添加一些功能，比如开始的数据库连接 ，可以先设置变量然后通过INIT() 来选择
- 对于DataFrame的修改操作其实有很多，不单单是某个部分的值的修改，还有一些索引的修改、列名的修改，类型修改等等。我们仅选取部分进行介绍
- 一、函数解释setdiff1d(ar1, ar2, assume_unique=False)1.功能：找到2个数组中集合元素的差异。2.返回
- 概述在进行网站爬取数据的时候，会发现很多网站都进行了反爬虫的处理，如JS加密，Ajax加密，反Debug等方法，通过请求获取数据和页面展示的
- 最新在学习 Python，PyCharm 编辑器启动太慢奈何我电脑太烂，所以我选择使用 Sublime Text3 做为编辑器不过 Subl
- 大量的多行段落本身就会降低可读性，同时空行分段也比空格分段有更高的可适应性...前文讨论的热烈程度远超我预期，正好还有之前查阅资料拍的几张实
- 说明：操作系统：Windows Server 2003MySQL版本：5.5.25MySQL程序安装目录：D:\Program Files\
- pycharm中光标变粗，如下：原因：光标进入了改写状态。解决方法：按一下键盘中的Insert键就好了。
- 这篇文章主要介绍了python解析命令行参数的三种方法详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要
- 前言近几年，制造业作为国民经济主体，是国家创造力、竞争力和综合国力的重要体现。作为制造强国建设的主攻方向，可以说，智能制造发展水平关乎我国未
