css实现垂直居中6种方法
在一次次笔试，一次次的面试中，问到垂直居中的问题太多太多，但是我每一次回答，都好像都不能让面试官太满意，今天特意花点时间，整理一下css垂直居中问题。
1、如果是单行文本。看代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#wrapper{
width: 500px;
height: 500px;
background: gray;
} #wrapper p{
line-height: 500px;//行高=父级的height，垂直居中。
text-align: center;//水平居中
}
</style>
</head>
<body> <div id="wrapper">
<p>这是一段要垂直水平居中的文字！</p>
</div> </body>
</html>
效果如图：
说明：适用于单行文本，多行就不可以了！
2、对于已知高度的块级元素，可以采用绝对定位。看代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#wrapper{
position: relative;//父级
width: 500px;
height: 500px;
background: gray;
} #wrapper p{
position: absolute;//子级用绝对定位
top:50%;//先定位到50%的位置
height: 300px;//已知的高度
margin-top: -150px;//往上提本身高度的一半
}
</style>
</head>
<body> <div id="wrapper">
<p>这是一段要垂直水平居中的文字！这是一段要垂直水平居中的文字！这是一段要垂直水平居中的文字！这是一段要垂直水平居中的文字！这是一段要垂直水平居中的文字！这是一段要垂直水平居中的文字！这是一段要垂直水平居中的文字！这是一段要垂直水平居中的文字！这是一段要垂直水平居中的文字！这是一段要垂直水平居中的文字！这是一段要垂直水平居中的文字！这是一段要垂直水平居中的文字！这是一段要垂直水平居中的文字！这是一段要垂直水平居中的文字！这是一段要垂直水平居中的文字！这是一段要垂直水平居中的文字！这是一段要垂直水平居中的文字！这是一段要垂直水平居中的文字！这是一段要垂直水平居中的文字！这是一段要垂直水平居中的文字！这是一段要垂直水平居中的文字！这是一段要垂直水平居中的文字！这是一段要垂直水平居中的文字！这是一段要垂直水平居中的文字！这是一段要垂直水平居中的文字！这是一段要垂直水平居中的文字！这是一段要垂直水平居中的文字！这是一段要垂直水平居中的文字！这是一段要垂直水平居中的文字！这是一段要垂直水平居中的文字！这是一段要垂直水平居中的文字！这是一段要垂直水平居中的文字！这是一段要垂直水平居中的文字！这是一段要垂直水平居中的文字！这是一段要垂直水平居中的文字！</p>
</div> </body>
</html>
效果如图:
适用：绝对定位为页面布局没有影响的情况下可以使用，并且子级的高度是已知的。
3、对于已知子级元素的高度，而且不能用绝对定位来布局的情况，看代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#wrapper{
background: gray;
width: 500px;
height: 500px;
text-align: center;
overflow: hidden;
} #null{
width: 100%;
height: 50%;
background: yellow;
} #content {
height: 100px;
margin: -50px;
} </style>
</head>
<body> <div id="wrapper">
<div id="null"></div>
<div id="content">居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~</div>
</div> </body>
</html>
效果如图：
适用：对于绝对布局有影响，不能适用position:absolute的元素，可以用以上这种方法，思路是：用一个块级元素，设置已知大小，在让其高度达到父级容器的一半大小，再把要居中的元素往上提半个高度。跟方法2同理。
4、垂直居中一张图片（行内元素）。看代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#wrapper{
width: 800px;
height: 800px;
background: gray;
text-align: center;
} #wrapper img{
vertical-align: middle;
} #wrapper #block{
background: blue;
height: 100%;
width: 0; }
</style>
</head>
<body> <div id="wrapper">
<img src="http://img0.bdstatic.com/img/image/2016ss1.jpg" alt="">
<img id="block">
</div> </body>
</html>
效果如图：
看到这里，细心的同学可能会发现：
这里的多了一个空的<img>标签，为什么要这样的，首先，要搞清楚vertical-align这个属性的特点，它是相对兄弟级行高（line-height）来定位，它是相对兄弟级行高（line-height）来定位，它是相对兄弟级行高（line-height）来定位（重要事情说三遍），并且他仅对行内元素有效，所以，在要定位的元素后面加多一个行内元素img来撑开父级的行高，以此来居中。然后必须强调你一点，记得把后面img的src=""这个空属性去掉，不然会留下一个空白框。如图：
然后，有些同学可能会有疑问，行内元素那么多。为什么你要用<img>标签呢！？
嗯嗯，也可以用其他行内元素，这里我用<span>来试一试给大家看：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#wrapper{
width: 800px;
height: 800px;
background: gray;
text-align: center;
} #wrapper img{
vertical-align: middle;
} #wrapper #block{
background: blue;
line-height: 800px;//跟父级一样高 }
</style>
</head>
<body> <div id="wrapper">
<img src="http://img0.bdstatic.com/img/image/2016ss1.jpg" alt="">
<span id="block"></span>
</div> </body>
</html>
这样的效果是一样的，记得哦，在这里不可以用line-height:100%这样来设置行高，详情可以查看我的另外一个博客“line-height:150%和line-height:1.5的区别”，了解一下line-height用百分比的特性。
适用：通用行内元素。
5、子父级都未知高度的块级元素居中，看代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#wrapper{
display: table;
background: gray;
width: 500px;
height: 500px;
text-align: center;
} #content {
display: table-cell;
vertical-align: middle;
} </style>
</head>
<body> <div id="wrapper">
<div id="content">居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~</div>
</div> </body>
</html>
效果如图：
适用：低版本的IE67不兼容，还有就是即便父级overflow：hidden,随着文本的增加，溢出的文本依旧不会隐藏，适用于少文字或者静态文字。
6、绝对定位居中法，看代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#wrapper{
position: relative;
background: gray;
width: 800px;
height: 800px;
} #content {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin:auto;
} </style>
</head>
<body> <div id="wrapper">
<img id="content" src="http://img0.bdstatic.com/img/image/2016ss1.jpg" alt="">
</div> </body>
</html>
效果如图：
首先，先感谢一下评论下方的@ 唯利是图 园友，感谢他的提醒。我尝试了这种绝对定位的方法，果然很好用。但是其原理是什么呢？
在这里，我先说一下这种定位方法的优点，可以无视被居中元素的宽度和高度，从而实现绝对定位的居中。我们来看看里面的代码，
这是什么意思呢？
其实就是将元素未知的宽度高度的元素，使其让它的top,bottom,left,right,都与父级的距离为零，如果其元素宽高不够的，就会用margin:auto去填充其大小。
从而实现了居中。
（这是本人的粗略理解，不一定准确!）
文章说明：个人查看各种资料，原创所得，观点不一定准确，欢迎各路大牛勘误，小女子感激不尽。
css实现垂直居中6种方法的更多相关文章
- CSS 垂直居中5种方法
利用 CSS 来实现对象的垂直居中有许多不同的方法,比较难的是选择那个正确的方法.我下面说明一下我看到的好的方法和怎么来创建一个好的居中网站. 使用 CSS 实现垂直居中并不容易.有些方法在一些浏览器 ...
- 关于Css的垂直居中的一些方法
前两种方法称为大致居中,一般误差随高度的减小而减小,不过一般来说不怎么看得出来,除非你用javascript调用offsetTop来查看.不然没有强迫症的比较难看出来.但是兼容性很好,尤其是table ...
- CSS清除浮动八种方法
在各种浏览器中显示效果也有可能不相同,这样让清除浮动更难了,下面总结8种清除浮动的方法,测试已通过 ie chrome firefox opera,需要的朋友可以参考下 清除浮动是每一个 web前台设 ...
- js和jquery设置css样式的几种方法
一.js设置样式的方法 1. 直接设置style的属性 某些情况用这个设置 !important值无效 element.style.height = '50px'; 2. 直接设置属性(只能用于某些 ...
- 你不知道的css高级应用三种方法——实现多行省略
前言 这是个老掉牙的需求啦,不过仍然有很多人在网上找解决方案,特别是搜索结果排名靠前的那些,都是些只会介绍兼容性不好的使用-webkit-line-clamp的方案. 如果你看到这篇文章,可能代表你正 ...
- css垂直居中 两种方法
在前端面试的时候我们经常会被问道怎样使一个元素在页面垂直居中呢,这也是一个老生常谈的问题了. 解决的方法基本都是使用定位来实现 div{display: fixed;left: 50%;top: 50 ...
- 纯CSS实现多行文字垂直居中几种方法解析
场景:父元素 高度固定,如何使其中的文字垂直居中? 1.table布局: 利用display:table+display:table-cell的方法 <!DOCTYPE html> < ...
- css中元素水平垂直居中4种方法介绍
table-cell轻松设置文本图片水平垂直居中 让一个元素垂直居中的思路:把这个元素的容器设置为table-cell,也就是具有表格单元格的特性,再使用vertical-align(这个属性对blo ...
- css垂直居中几种方法（二）
方法1:table-cell .box1{ display: table-cell; vertical-align: middle; text-align: center; } <div cla ...
随机推荐
- PHP FTP
安装 PHP 的 Windows 版本内置了对 FTP 扩展的支持.无需加载任何附加扩展库即可使用 FTP 函数. 然而,如果您运行的是 PHP 的 Linux 版本,在编译 PHP 的时候请添加 - ...
- react-native-router-flux 下部导航
github url:https://github.com/aksonov/react-native-router-flux API: https://github.com/aksonov/react ...
- 自定义异常throw
简单自定义一个年龄小于等于0,或者大于120会出现的异常 首先继承父类Exception,调用父类的构造器,这样才可以报出自己想要的异常 public class AgeException exten ...
- 洛谷 P1316 丢瓶盖
P1316 丢瓶盖 题目描述 陶陶是个贪玩的孩子,他在地上丢了A个瓶盖,为了简化问题,我们可以当作这A个瓶盖丢在一条直线上,现在他想从这些瓶盖里找出B个,使得距离最近的2个距离最大,他想知道,最大可以 ...
- android开发——数独游戏
最近研究了一下android,写了一个数独游戏,具体如下: 游戏界面需要重写一个ShuduView继承View, 然后自定义一个Dialog: 1.需要继承 Dialog 类, 2.并要定义一个有参构 ...
- IE的有条件注释详解
IE的有条件注释是一种专有的(因此是非标准的).对常规(X)HTML注释的Miscrosoft扩展.顾名思义,有条件注释使你能够根据条件(比如浏览器版本)显示代码块.尽管是非标准的,但是有条件注释对于 ...
- Python3 如何优雅地使用正则表达式（详解五）
非捕获组命名组 精心设计的正则表达式可能会划分很多组,这些组不仅可以匹配相关的子串,还能够对正则表达式本身进行分组和结构化.在复杂的正则表达式中,由于有太多的组,因此通过组的序号来跟踪和使用会变得困难 ...
- UCOS 杂项 笔记
1. 建立任务和建立数据队列 哪个先建立? 经过试验得知,数据队列和任务的建立先后没有顺序,都可以正常运行. 2.关于主函数的面试问题. 主函数写法有: int main() 和voi ...
- Mssql显错和不显错模式下的注入
Title:Mssql显错和不显错模式下的注入 -- 2010-10-27 19:51 近期用手工注入用习惯了,便列出最近用的Mssql语句,以后方便拿来用! -------------------- ...
- Android 之Service
service是运行在后台的服务,你可以启动一个服务Service来播放音乐,或者记录你地理信息位置的改变,或者启动一个服务来运行并一直监听某种动作. 接下来分析一下service 的生命周期: 1: ...