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 ...
随机推荐
- Rational Rose 7.0的使用（转）
1.Rose如何隐藏类的属性和操作? 右击类图,选择Options->Suppress Attributes/Suppress Operations 2.Rose中如何表示双向关联? 右击关联线 ...
- The Primo ScholarRank Technology: Bringing the Most Relevant Results to the Top of the List
By Tamar Sadeh, Director of Marketing In today’s world, users’ expectations for a quick and easy sea ...
- centOS上安装redis
1.安装tcl支持 yum install tcl 2.安装redis我们以最新的2.8.9为例 $ wget http://download.redis.io/releases/redis-2.8. ...
- phpCMS V9 自定义添加 全局变量{SKIN_PATH}方法
前言:目前v9版本新增{js_path},{css_path},{img_path}三个全局变量,代替2008版本中{skin_path},样式图片脚本分开路径,确实达到了一定在后台管理方便的目的,但 ...
- OpenStack点滴02-WSGI
OpenStack对外提供REST API,那么REST API是如何建立起来的呢? OpenStack用了一种叫WSGI(Web Service Gateway Interface)的东西,WSGI ...
- APMServ5.2.6升级PHP
前言:这两天闲着没事,就想学一下ThinkPHP.学习ThinkPHP要先安装好Apache.MySQL .PHP等运行环境. 为了方便起见,打算就用集成环境.ThinkPHP官方网站推荐的是“WAM ...
- CentOS 6.5 + Nginx 1.8.0 + PHP 5.6(with PHP-FPM) 负载均衡源码安装 之 （二）PHP(PHP-FPM)安装篇
编译安装PHP及内置PHP-FPM nginx本身不能处理PHP,它只是个web服务器,当接收到请求后,如果是php请求,则发给php解释器处理,并把结果返回给客户端(浏览器). nginx一般是把请 ...
- Check if a string is NULL or EMPTY using PowerShell
http://techibee.com/powershell/check-if-a-string-is-null-or-empty-using-powershell/1889 Check if a s ...
- 设计模式（九）：Composite组合模式 -- 结构型模式
1. 概述 在数据结构里面,树结构是很重要,我们可以把树的结构应用到设计模式里面. 例子1:就是多级树形菜单. 例子2:文件和文件夹目录 2.问题 我们可以使用简单的对象组合成复杂的对象,而这个复杂对 ...
- 【转】android应用开发全程实录-你有多熟悉listview？---不错
原文网址:http://www.cnblogs.com/noTice520/archive/2011/12/05/2276379.html 今天给大家带来<android应用开发全程实录> ...