在一次次笔试，一次次的面试中，问到垂直居中的问题太多太多，但是我每一次回答，都好像都不能让面试官太满意，今天特意花点时间，整理一下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. mysql数据表如何导入MSSQL中

    本案例演示所用系统是windows server 2012.其它版本windows操作系统类似. 1,首先需要下载mysql odbc安装包. http://dev.mysql.com/downloa ...

  2. jquery插件：点击拉出的右侧滑动菜单

    就是一个停留在页面右侧的滑动菜单,点击可以拉出,带回调函数.宽高位置可以参数指定.插件代码如下: (jquery的路径请自己修改) (function($){ $.fn.sideSwitch = fu ...

  3. php访问方法外变量

    class Capture { private static $_CapSite = 222; function dd() { echo self::$_CapSite; } } $cc=new Ca ...

  4. java swing 音乐播放器-乐乐音乐

    乐乐音乐1.0(本地版) 乐乐音乐是基于musique 开源播放器开发的java swing音乐播放器,实现了mp3.flac.ape.wav等多种音频格式的播放和ksc歌词的解析.制作和显示. 完成 ...

  5. 武汉科技大学ACM：1002: 华科版C语言程序设计教程（第二版）例题6.6

    Problem Description 明天就要英语考试了,小明明正在挑灯夜 战背单词.小明明发现单词很难背,背一个忘一个.经过仔细研究,小明明发现单词难背的原因是因为某个字符的出现,破坏了整个单词的 ...

  6. uva10020 贪心

    题目链接:https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem ...

  7. 【Ecstore2.0】导出问题解决（未导出或导出文件为0字节)

    如果导出队列能成功执行(队列不执行看这里)但是并未生成文件,那么原因大部份可能是出在FTP上. ECSTORE2.0采用了PHP的FTP模块,所以先确认你的环境是否安装了FTP模块,如果没有,安装并在 ...

  8. linux运维面试题汇总一

    1.如何让history历史命令显示命令使用的具体时间? [root@node0 ~]# export HISTTIMEFORMAT='%F  %T ' [root@node0 ~]# history ...

  9. 手机页面关于头部固定定位与input出现的问题

    前些天写了一个页面,要求头部导航进行固定定位position:fixed.内容区域有输入框input.在大多数手机上都是显示正常的,可偏在一些低版本的手机却出现问题了. 把我给苦恼的不行. 问题:头部 ...

  10. Sicily 1034. Forest

    题目地址:1034. Forest 思路: 网上很多说用深搜,很任性.......发现广搜也挺好用的,实验课打的(⊙o⊙)…orz........囧. 先找根结点,根据根结点广搜深度,广搜宽度,不过要 ...