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

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

 
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>index</title>
  6. <style>
  7. .content {
  8. width: 300px;
  9. height: 300px;
  10. background: orange;
  11. }
  12. </style>
  13. </head>
  14. <body>
  15. <div class="content"></div>
  16. </body>
  17. </html>

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

  1. <html lang="en">
  2. <head>
  3. <meta charset="UTF-8">
  4. <title>index</title>
  5. <style>
  6. .content {
  7. width: 300px;
  8. height: 300px;
  9. background: orange;
  10. margin: 0 auto;
  11. }
  12. </style>
  13. </head>
  14. <body>
  15. <div class="content"></div>
  16. </body>
  17. </html>

效果如下：

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>index</title>
  6. <style>
  7. html, body {
  8. width: 100%;
  9. 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，就可以通过top、bottom、right、left等属性使它在正常的文档流中发生位置偏移（注意，此时它在并没有脱离文档流，原来的位置还会占据着的！）。对于position属性不熟悉的，可以自己去w3c看一下。设置了position: relative后的代码如下:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>index</title>
  6. <style>
  7. html, body {
  8. width: 100%;
  9. 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%试一下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>index</title>
  6. <style>
  7. html,body {
  8. width: 100%;
  9. 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>

效果如下图所示：

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

通过观察上图，只要让div的中心移动到红线的位置，那么整个div就居中了。那怎么让它中心移动到红线处呢？从图中可以观察到，从div的中心到红线的距离是div自身高度的一半。这时候，我们可以使用通过margin-top属性来设置，因为div的自身高度是300，所以，需要设置他的margin-top值为-150。为什么是要设置成负数的呢？因为正数是向下偏移，我们是希望div向上偏移，所以应该是负数，如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>index</title>
  6. <style>
  7. html,body {
  8. width: 100%;
  9. 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. margin-top: -150px;
  21. }
  22. </style>
  23. </head>
  24. <body>
  25. <div class="content"></div>
  26. </body>
  27. </html>

确实已经居中了。好兴奋！有木有？！

除了可以使用margin-top把div往上偏移之外，CSS3的transform属性也可以实现这个功能，通过设置div的transform: translateY(-50%)，意思是使得div向上平移（translate）自身高度的一半(50%)。如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>index</title>
  6. <style>
  7. html,body {
  8. width: 100%;
  9. 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. transform: translateY(-50%);
  21. }
  22. </style>
  23. </head>
  24. <body>
  25. <div class="content"></div>
  26. </body>
  27. </html>

效果如下：

上面的两种方法，我们都是基于设置div的top值为50%之后，再进行调整垂偏移量来实现居中的。如果使用CSS3的弹性布局（flex）的话，问题就会变得容易多了。使用CSS3的弹性布局很简单，只要设置父元素（这里是指body）的display的值为flex即可。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>index</title>
  6. <style>
  7. html,body {
  8. width: 100%;
  9. height: 100%;
  10. margin: 0;
  11. padding: 0;
  12. }
  13. body {
  14. display: flex;
  15. align-items: center; /*定义body的元素垂直居中*/
  16. justify-content: center; /*定义body的里的元素水平居中*/
  17. }
  18. .content {
  19. width: 300px;
  20. height: 300px;
  21. background: orange;
  22. }
  23. </style>
  24. </head>
  25. <body>
  26. <div class="content"></div>
  27. </body>
  28. </html>

效果：

CSS中盒子垂直居中的常用方法的更多相关文章

  1. 深入了解CSS中盒子模型

    CSS中盒子模型介绍 什么是盒子? 盒子是用来存储物品,我们可以将盒子理解为酒盒,酒盒有什么组成的呢? 有酒可以喝.有填充物保护酒防止酒被摔坏.纸盒子. 我们怎么理解CSS中的盒子呢,CSS中盒子有什 ...

  2. CSS系列：CSS中盒子模型

    盒子模型是CSS控制页面时一个很重要的概念.所有页面中的元素都可以看成是一个盒子,占据着一定的页面空间.可以通过调整盒子的边框和距离等参数,来调节盒子的位置和大小. 1. 盒子的内部结构 在CSS中, ...

  3. CSS系列：CSS中盒子的浮动与定位

    1. 盒子的浮动 在标准流中,一个块级元素在水平方向会自动伸展,知道包含它的元素的边接:而在竖直方向与相邻元素依次排列,不能并排. CSS中float属性,默认为none.将float属性的值设置为l ...

  4. 认识CSS中盒子模型

    前端之HTML,CSS(六) CSS 盒子模型 CSS中的重点,理解盒子模型对于CSS才能有更清晰的认识.网页说简单一点其实就是一块一块的拼接出来的,可以想象成拼图,所有图块拼接在一起就成了一幅图像. ...

  5. css 中 div垂直居中的方法

    在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...

  6. CSS中 隐藏元素的常用方法

    在CSS中,使某个元素在页面中消失的方法有很多,今天为大家介绍几种我常用的方式 . 一.display:none;   让元素直接从页面消失,不占用尺寸,会改变页面布局. 代码演示: 页面演示:在页面 ...

  7. CSS系列：CSS中盒子之间的关系

    1. 标准文档流 标准文档流是值在不使用其他的雨排列和定位相关的特殊CSS规则时,各种元素的排列规则. 1.1 块级元素(block level) 块级元素不会排在同一行中,总是以一个块的形式表现出来 ...

  8. css中盒子宽高的auto

    CSS盒模型中,auto属性只适用于外margin和width,height,border和padding不适用.下面就来说说它的情况.这里所说的都是标准流盒子. 1.横向来说 (1)若设置width ...

  9. Web前端 css实现元素垂直居中的常用方法

    方法1:table-cell html结构: 1 2 3 <div class="box box1">         <span>垂直居中</spa ...

随机推荐

  1. mcake活动维护，检查 ★ ★

    一.检查火狐浏览器.chrome浏览器.ie8.9.10.11是否显示正常 二.对比设计稿 三.动画添加 四.检查图片是否失真 五.ie8空按钮无法点击 六.官网banner制作

  2. Java加载jar文件并调用jar文件当中有参数和返回值的方法

    在工作当中经常遇到反编译后的jar文件,并要传入参数了解其中的某些方法的输出,想到Java里面的反射可以实现加载jar文件并调用其中的方法来达到自己的目的.就写了个Demo代码. 以下的类可以编译生成 ...

  3. CallKit iOS 教程

    原文:CallKit Tutorial for iOS 作者:József Vesza 译者:kmyhy 对 VoIP App 开发者来说,iOS 的支持并不友好.尤其是它的通知发送这一块,太糙了.你 ...

  4. Lua学习---编译生成lua和luac

    众所周知,Lua是一种强大的脚本语言,并且这种语言是用C语言实现的.为什么要学习这门语言?因为它可以增强我看C语言代码的功底. 我下的Lua版本是Lua5.3,关于Lua5.3的简介如下: http: ...

  5. 有状态与无状态 cookie session

    服务器所维护的与客户交互活动的信息称为状态信息.不保存任何状态信息的服务器称为无状态服务器(stateless server),反之则称为有状态服务器(stateful server). 面向连接对应 ...

  6. J-Link在SWD模式与MCU能连接成功但不能读写

    今天在J-Link的排线末端引出3.3v.SWDIO.SWCLK.GND,连接到stm32上,发现只能连接成功,不能读和写,出现下面错误: - ERROR: RAM check failed @ ad ...

  7. 【openCV学习笔记】在Mac上配置openCV步骤详解

    (1)安装Homebrew:(需要Ruby) 注:因为snow leopard 以后已经自带Ruby了,所有可以不用自己安装Ruby. 看一下Homebrew的官网: http://mxcl.gith ...

  8. Android 控件之Spinner

    Spinner用来显示列表项,类似于一组单选框RadioButton.下面瞥一下它的效果. 源码下载 一.概述 Spinner是一个每次只能选择所有项的一个项的控件.它的项来自于与之相关联的适配器中. ...

  9. cvc-complex-type.2.4.a: Invalid content was found starting with element 'async-supported'

    <servlet> <servlet-name>springMVC</servlet-name> <servlet-class>org.springfr ...

  10. druid抛出异常：javax.management.InstanceAlreadyExistsException: com.alibaba.druid:type=DruidDataSource,id=xxx

    第一种结论 (参考: https://www.cnblogs.com/youzhibing/p/6826767.html): 问题产生的根本原因还真是:同一实例被启动了两遍,Path为/SLBAdmi ...