您的位置: 首页 > 软件教程 > DIV+CSS教程专题 > 如何用CSS实现垂直居中 垂直居中有哪些实现方式

如何用CSS实现垂直居中 垂直居中有哪些实现方式

6.0分
出处:http://www.cnblogs.com/ 时间:2017-02-17

您可能感兴趣的话题: CSS  

核心提示:在前端开发过程中,盒子居中是常常用到的。如何实现垂直居中呢

  在前端开发过程中,盒子居中是常常用到的。其中 ,居中又可以分为水平居中和垂直居中。水平居中是比较容易的,直接设置元素的margin: 0  auto就可以实现。但是垂直居中相对来说是比较复杂一些的。下面我们一起来讨论一下实现垂直居中的方法。

  首先,定义一个需要垂直居中的div元素,他的宽度和高度均为300px,背景色为橙色。代码如下:

01<!DOCTYPE html>
02<html lang="en">
03<head>
04    <meta charset="UTF-8">
05    <title>index</title>
06    <style>
07        .content {
08            width: 300px;
09            height: 300px;
10            background: orange;
11        }
12    </style>
13</head>
14<body>
15    <div class="content"></div>
16</body>
17</html>

  效果如下:

如何用CSS实现垂直居中 垂直居中有哪些实现方式

  我们需要使得这个橙色的div居中,到底该怎么办呢?首先我们让实现水平居中,上面已经提到过了,可以通过设置margin: 0  auto实现水平居中,代码如下:

01<!DOCTYPE html>
02<html lang="en">
03<head>
04    <meta charset="UTF-8">
05    <title>index</title>
06    <style>
07        .content {
08            width: 300px;
09            height: 300px;
10            background: orange;
11            margin: 0 auto;
12        }
13    </style>
14</head>
15<body>
16    <div class="content"></div>
17</body>
18</html>

  效果如下:

如何用CSS实现垂直居中 垂直居中有哪些实现方式

  很好,已经实现水平居中了!接下来该打大boss了——实现垂直居中。不过,在这之前,我们先要设置div元素的祖先元素html和body的高度为100%(因为他们默认是为0的),并且清除默认样式,即把margin和padding设置为0(如果不清除默认样式的话,浏览器就会出现滚动条,聪明的亲,自己想想问什么)。

01<!DOCTYPE html>
02<html lang="en">
03<head>
04    <meta charset="UTF-8">
05    <title>index</title>
06    <style>
07        html, body {
08            width: 100%;
09            height: 100%;
10            margin: 0;
11            padding: 0;
12        }
13        .content {
14            width: 300px;
15            height: 300px;
16            background: orange;
17            margin: 0 auto; /*水平居中*/
18        }
19    </style>
20</head>
21<body>
22    <div class="content"></div>
23</body>
24</html>

  接下来,我们需要做的事情就是要让div往下移动了。我们都知道top属性可以使得元素向下偏移的。但是,由于默认情况下,元素在文档流里是从上往下、从左到右布局的,我们是不可以直接通过top属性改变他的垂直偏移的。这就就需要使用position属性使它脱离文档流流了。这很简单,只要设置它的值为relative就行了。对于position属性不熟悉的,可以自己去w3c看一下。下面我们就让div脱离文档流:

01<!DOCTYPE html>
02<html lang="en">
03<head>
04    <meta charset="UTF-8">
05    <title>index</title>
06    <style>
07        html, body {
08            width: 100%;
09            height: 100%;
10            margin: 0;
11            padding: 0;
12        }
13        .content {
14            width: 300px;
15            height: 300px;
16            background: orange;
17            margin: 0 auto; /*水平居中*/
18            position: relative; /*脱离文档流*/
19        }
20    </style>
21</head>
22<body>
23    <div class="content"></div>
24</body>
25</html>

  我们刷新一下页面,发现跟之前是没有任何变化的,因为,我们仅仅是使div脱离了文档流,但是还没开始移动他的垂直偏移。好,下面我们就让它偏移吧!垂直偏移需要用到top属性,它的值可以是具体的像素,也可以是百分数。因为我们现在不知道父元素(即body)的具体高度,所以,是不可以通过具体像素来偏移的,而应该用百分数。既然是要让它居中嘛!好,那么我们就让它的值为50%不就行了吗?问题真的那么简单,我们来试一下,就设置50%试一下:

01<!DOCTYPE html>
02<html lang="en">
03<head>
04    <meta charset="UTF-8">
05    <title>index</title>
06    <style>
07        html,body {
08            width: 100%;
09            height: 100%;
10            margin: 0;
11            padding: 0;
12        }
13        .content {
14            width: 300px;
15            height: 300px;
16            background: orange;
17            margin: 0 auto; /*水平居中*/
18            position: relative; /*脱离文档流*/
19            top: 50%; /*偏移*/
20        }
21    </style>
22</head>
23<body>
24    <div class="content"></div>
25</body>
26</html>

  效果如下图所示:

如何用CSS实现垂直居中 垂直居中有哪些实现方式

  div垂直方向上面并没有居中。明显是偏下了。下面,我们在浏览器中间画一条红线用来参考,如下图:

如何用CSS实现垂直居中 垂直居中有哪些实现方式
网友评论
精品软件课程
更多 >
Adobe Flash,是Macromedi... [详细]
Dreamweaver是网页制作和管理的所见... [详细]
MySQL是一个小型关系型数据库管理系统,被... [详细]
PHP是一种 HTML 内嵌式的语言,是一种... [详细]
HTML的中文叫做“超文本标记语言”。是用来... [详细]
Dreamweaver是网页制作和管理的所见... [详细]