CSS实现垂直居中的5种方法
作者：糖伴西红柿 来源：前端观察 发布时间：2009-03-04 12:53:00
标签：垂直居中,方法,css,浏览器
利用 CSS 来实现对象的垂直居中有许多不同的方法，比较难的是选择那个正确的方法。我下面说明一下我看到的好的方法和怎么来创建一个好的居中网站。
使用 CSS 实现垂直居中并不容易。有些方法在一些浏览器中无效。下面我们看一下使对象垂直集中的5种不同方法，以及它们各自的优缺点。(可以看看测试页面，有简短解释。)
方法一
这个方法把一些 div 的显示方式设置为表格，因此我们可以使用表格的 vertical-align property 属性。
<div id="wrapper"><div id="cell"><div class="content"> Content goes here</div></div></div>
#wrapper {display:table;}#cell {display:table-cell; vertical-align:middle;}
优点：
content 可以动态改变高度(不需在 CSS 中定义)。当 wrapper 里没有足够空间时， content 不会被截断
缺点：
Internet Explorer(甚至 IE8 beta)中无效，许多嵌套标签(其实没那么糟糕，另一个专题)
0
投稿猜你喜欢
1、django应用Celerydjango框架请求/响应的过程是同步的，框架本身无法实现异步响应。但是我们在项目过程中会经常会遇到一些耗时- 前言：随着移动端的普及出现了很多的移动 APP，应用软件也随之流行起来。最近又捡起来了英雄联盟手游，感觉还行，PC 端英雄联盟可谓是爆火的游
- 本文以Python开发为例来进行说明，环境说明：（1） Python 3.x（我用的版本是 3.9 版本）（2）IDE开具 PyCharm（
- Python入门 本系列为Python学习相关笔记整理所得，IT人
- 一开始没看懂stddev是什么参数，找了一下，在tensorflow/python/ops里有random_ops，其中是这么写的：def
- 这个操作在numpy数组上的操作感觉有点麻烦，但是也没办法。例如 a = [[1,2,3], [4,5,6], [7,8,9]]取 a 的
- 原则一：注意WHERE子句中的连接顺序： ORACLE采用自下而上的顺序解析WHERE子句,根据这个原理,表之间的连接必须写在其他WHERE
- 如何在ADSI中查询用户属性？看看下面这个返回用户可用属性的代码实例，基本上返回了大部分可用的用户属性：<％Dim x&nb
- 数据库数据导出为excel表格，也可以说是一个很常用的功能了。毕竟不是任何人都懂数据库操作语句的。下面先来看看完成的效果吧。数据源导出结果依
- Oracle LogMiner 是Oracle公司从产品8i以后提供的一个实际非常有用的分析工具，使用该工具可以轻松获得Oracle 重作日
- 这篇文章主要介绍了Python OrderedDict的使用案例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值
- 1）文件 —> 首选项因为 VsCode 默认启用了根据文件类型自动设置tabsize的选项，在设置中添加："editor.
- 目录简述：实战案例：简述：关于敏感词过滤可以看成是一种文本反垃圾算法，例如 题目：敏感词文本文件 filtered_words.t
- $str = '中华人民共和国123456789abcdefg'; echo preg_match("/^[u4e
- 前言tkinter：GUI桌面应用开发模块，写软件界面你还可以打包成exe软件, 哪怕你没有python环境, 一样可以用虽然不一定要有界面
- 什么是瀑布图？瀑布图用表达两个数值之间的变化过程，过程值为正的时候，向上加，过程值为负的时候向下减[1]。今天分享在Python中绘制瀑布图
- var obj = document.getElementById("testSelect"); //定位idvar i
- 堆是一棵完全二叉树。堆分为大根堆和小根堆，大根堆是父节点大于左右子节点，并且左右子树也满足该性质的完全二叉树。小根堆相反。可以利用堆来实现优
- 一、游戏玩法介绍：24点游戏是儿时玩的主要益智类游戏之一，玩法为：从一副扑克中抽取4张牌，对4张牌使用加减乘除中的任何方法，使计算结果为24
- 1. 用途(?(id/name)yes-pattern|no-pattern)的作用是：对于给出的id或者name，先尝试去匹配
