在前端开发过程中，盒子居中是常常用到的。其中 ，居中又可以分为水平居中和垂直居中。水平居中是比较容易的，直接设置元素的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> |
效果如下：
我们需要使得这个橙色的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> |
效果如下：
很好，已经实现水平居中了!接下来该打大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> |
效果如下图所示：
div垂直方向上面并没有居中。明显是偏下了。下面，我们在浏览器中间画一条红线用来参考，如下图：
通过观察上图，只要让div的中心移动到红线的位置，那么整个div就居中了。那怎么让它中心移动到红线处呢?从图中可以观察到，从div的中心到红线的距离是div自身高度的一半。这时候，我们可以使用通过margin-top属性来设置，因为div的自身高度是300，所以，需要设置他的margin-top值为-150。为什么是要设置成负数的呢?因为正数是向下偏移，我们是希望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 |
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%)。如下：
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 |
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即可。具体代码如下，对代码不做过多的解释，如果想了解弹性布局的可以看阮一峰老师的博客http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html：
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 |
14 |
body {
|
15 |
display: flex;
|
16 |
align-items: center; /*定义body的元素垂直居中*/
|
17 |
justify-content: center; /*定义body的里的元素水平居中*/
|
18 |
}
|
19 |
.content {
|
20 |
width: 300px;
|
21 |
height: 300px;
|
22 |
background: orange;
|
23 |
}
|
24 |
</style>
|
25 |
</head> |
26 |
<body> |
27 |
<div class="content"></div>
|
28 |
</body> |
29 |
</html> |
效果：
除了上面3中方法之外，当然可能还存在许多的可以实现垂直居中的方法。比如可以将父容器设置为display:table ，然后将子元素也就是要垂直居中显示的元素设置为 display:table-cell 。但是，这是不值得推荐的，因为会破坏整体的布局。如果用table布局，那么为什么不直接使用table标签了?那不更加方便吗?
关于CSS实现垂直居中的方法，就写这么多了。如果，发现哪里写的不对的或者有更好的方法的，请在评论提出来，这样大家可以一起讨论、共同进步!
来源：http://www.cnblogs.com/yugege/p/5246652.html
相关推荐
在网页设计中，让元素在页面上垂直居中是一项常见的需求。CSS（Cascading Style Sheets）提供了多种方法来实现这一目标。以下是一些主要的CSS技术，...在实践中不断尝试和学习，可以让你更好地掌握CSS垂直居中的技巧。
本文主要探讨了如何使用CSS实现垂直居中，这是页面布局中常见的需求。垂直居中分为两种主要情况：内外元素高度全定和外层元素高度定，内层高度不定。 1. **内外元素高度全部确定的情况** - **line-height 与 ...
### CSS 实现垂直居中的五种方法 在前端开发中，如何使元素在页面中垂直居中是一项常见的需求。本文将详细介绍五种不同的方法来实现这一目标，并对每种方法的特点进行分析，以便开发者根据实际情况选择最合适的方案...
在CSS布局中，垂直居中是一项常见的需求，尤其在页面设计中显得尤为重要。...以上就是针对不同情况的CSS垂直居中实现方式，每种方法都有其适用场景和局限性，开发者需要根据项目需求和目标浏览器范围选择合适的方法。
本教程将详细讲解5种有效的CSS方法，帮助你掌握垂直居中的技巧。 1. **Flexbox布局** Flexbox是现代CSS布局模型，特别适合处理容器内子元素的对齐问题。要实现垂直居中，首先设置容器的`display`属性为`flex`，...
"CSS实现完美垂直居中"这一主题深入探讨了如何利用CSS技术使元素在容器内实现精确的垂直对齐。以下是一些关于这个主题的关键知识点： 1. **单行文本垂直居中**： 对于单行文本，可以使用`line-height`属性来实现...
综上所述，"DIV+CSS 图片垂直居中效果"可以通过多种方法实现，具体选择哪种取决于项目需求、浏览器兼容性和响应式设计的需求。在提供的`index.html`、`images`和`css`文件中，我们可以看到实际的代码应用和图片资源...
以上都是在不同场景下实现CSS图片垂直居中的常见方法。具体选择哪种方法取决于你的项目需求，比如兼容性、布局复杂度等因素。在实际应用中，可能需要根据实际情况调整这些代码，以适应各种浏览器和设备。通过阅读...
本文将详细介绍DIV+CSS水平垂直居中的方法和实现原理。 一、使用position:absolute实现水平垂直居中 使用position:absolute可以将DIV元素水平垂直居中，方法是将DIV元素的left和top属性设置为50%，然后通过margin-...
本篇文章将深入探讨如何利用CSS实现图片的垂直居中效果。 首先，我们来看几种常见且实用的CSS方法： 1. **Flexbox布局**： Flexbox是CSS3引入的一种新的布局模式，特别适合处理容器内元素的对齐问题。要使图片在...
"CSS 实现垂直居中水平居中的几种方式" CSS 中实现垂直居中水平居中的几种方式是非常重要的，以下是几种常见的实现方式： 1. 容器内（Within Container） 在容器内实现垂直居中水平居中可以通过设置容器的 ...
本文将介绍几种有效的CSS垂直居中方法，以便开发者可以根据具体场景选择适合的方法。 1. 表格单元格方式 这种方法通过将容器设置为表格样式，然后将子元素设置为表格单元格并应用`vertical-align: middle`来实现...
CSS实现垂直居中是网页布局中的常见需求，本文将详细讲解四种不同的方法，帮助开发者更好地理解和运用这些技巧。 1. **行高line-height实现单行文本垂直居中** 单行文本的垂直居中可以通过设置`line-height`来实现...
#### CSS垂直居中原理 在CSS中，`vertical-align`属性主要用于设置行内元素或表格单元格中的内容垂直对齐方式。但是，当涉及到块级元素时，这个属性并不起作用。因此，我们需要采用其他技术来达到垂直居中的目的。...
在网页设计中，实现元素的垂直居中和水平居中是一项常见的需求，这涉及到CSS布局技术。本篇文章将深入探讨如何使用div+css方法来实现这一目标。在现代Web开发中，div元素作为布局容器广泛使用，而CSS则是样式控制的...
CSS 盒子水平居中、垂直居中和水平垂直居中的实现方法 在 CSS 中，实现盒子水平居中、垂直居中和水平垂直居中是非常常见的需求。本文将介绍五种不同的方法来实现这些效果，并对每种方法的优缺点进行分析。 一、...
为实现良好的兼容性，PC端实现垂直居中的方法一般是通过绝对定位，table-cell，负边距等方法。有了css3，针对移动端的垂直居中就更加多样化。 方法1：table-cell html结构： XML/HTML Code复制内容到剪贴板 box1>...
，就可以轻松解决掉水平居中的问题，但一直以来最麻烦对齐问题，都是“垂直居中”这个讨人厌的设定，以下将介绍七种单纯利用CSS垂直居中的方式。 七种垂直居中的方法 设定行高（line-height） 添加伪元素 calc...
利用 CSS 来实现对象的垂直居中有许多不同的方法，比较难的是选择那个正确的方法。我下面说明一下我看到的好的方法和怎么来创建一个好的居中网站。使用 CSS 实现垂直居中并不容易。有些方法在一些浏览器中无效。下面...