在一次次笔试，一次次的面试中，问到垂直居中的问题太多太多，但是我每一次回答，都好像都不能让面试官太满意，今天特意花点时间，整理一下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种方法的更多相关文章

  1. CSS 垂直居中5种方法

    利用 CSS 来实现对象的垂直居中有许多不同的方法,比较难的是选择那个正确的方法.我下面说明一下我看到的好的方法和怎么来创建一个好的居中网站. 使用 CSS 实现垂直居中并不容易.有些方法在一些浏览器 ...

  2. 关于Css的垂直居中的一些方法

    前两种方法称为大致居中,一般误差随高度的减小而减小,不过一般来说不怎么看得出来,除非你用javascript调用offsetTop来查看.不然没有强迫症的比较难看出来.但是兼容性很好,尤其是table ...

  3. CSS清除浮动八种方法

    在各种浏览器中显示效果也有可能不相同,这样让清除浮动更难了,下面总结8种清除浮动的方法,测试已通过 ie chrome firefox opera,需要的朋友可以参考下 清除浮动是每一个 web前台设 ...

  4. js和jquery设置css样式的几种方法

    一.js设置样式的方法 1. 直接设置style的属性  某些情况用这个设置 !important值无效 element.style.height = '50px'; 2. 直接设置属性(只能用于某些 ...

  5. 你不知道的css高级应用三种方法——实现多行省略

    前言 这是个老掉牙的需求啦,不过仍然有很多人在网上找解决方案,特别是搜索结果排名靠前的那些,都是些只会介绍兼容性不好的使用-webkit-line-clamp的方案. 如果你看到这篇文章,可能代表你正 ...

  6. css垂直居中 两种方法

    在前端面试的时候我们经常会被问道怎样使一个元素在页面垂直居中呢,这也是一个老生常谈的问题了. 解决的方法基本都是使用定位来实现 div{display: fixed;left: 50%;top: 50 ...

  7. 纯CSS实现多行文字垂直居中几种方法解析

    场景:父元素 高度固定,如何使其中的文字垂直居中? 1.table布局: 利用display:table+display:table-cell的方法 <!DOCTYPE html> < ...

  8. css中元素水平垂直居中4种方法介绍

    table-cell轻松设置文本图片水平垂直居中 让一个元素垂直居中的思路:把这个元素的容器设置为table-cell,也就是具有表格单元格的特性,再使用vertical-align(这个属性对blo ...

  9. css垂直居中几种方法（二）

    方法1:table-cell .box1{ display: table-cell; vertical-align: middle; text-align: center; } <div cla ...

随机推荐

  1. oracle 分布式数据库

    分布式数据库的数据库链路是单向的

  2. C++中的函数指针

    寒假这些天在看<The C++ Programming Language, 3rd>. 今天看到Chapter7 Function,里头好一些东西是C语言里没有的,比如overload.p ...

  3. C#操作Excel文件（转）

    摘要:本文介绍了Excel对象.C#中的受管代码和非受管代码,并介绍了COM组件在.net环境中的使用. 关键词:受管代码:非受管代码:Excel对象:动态连接库 引言 Excel是微软公司办公自动化 ...

  4. scss组件定制的一些学习

    应组织上的要求,简化前端开发,提高工作效率,开始着手研究scss框架及组件化. 把一些长的像的弄在一起,就有了组件化. 但组件只用一部分需要的,就有了定制. 下面是参考一个button组件写出的一些简 ...

  5. C++快速排序实现(quicksort)

    quicksort:分治思想. 分解:数组A[p, r)被划分成两个子数组A[pq) 和 A[q+1, r),使得A[pq)中的每个元素小于等于A[q], A[q]也小于A[q+1r)中的每个元素.q ...

  6. 学习微信小程序之css17clearfix原理

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. PCB Layout爬电距离、电气间隙的确定

    爬电距离的确定:首先需要确定绝缘的种类:基本绝缘:一次电路与保护地工作绝缘 ① :一次电路内部:二次电路内部工作绝缘 ② :输入部分(输入继电器之前)内部,二次电路与保护地加强绝缘:一次电路与二次电路 ...

  8. BZOJ3412: [Usaco2009 Dec]Music Notes乐谱

    3412: [Usaco2009 Dec]Music Notes乐谱 Time Limit: 3 Sec  Memory Limit: 128 MBSubmit: 35  Solved: 30[Sub ...

  9. BZOJ3301: [USACO2011 Feb] Cow Line

    3301: [USACO2011 Feb] Cow Line Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 67  Solved: 39[Submit ...

  10. 【转】android小结(一)之menu

    原文网址:http://zhouyunan2010.iteye.com/blog/1151215 android提供有三种menu类型 一.Options Menu(选项菜单) 这是一组item选项的 ...