html中如何让元素垂直居中（转）
  　在前端开发过程中，盒⼦居中是常常⽤到的。其中，居中⼜可以分为⽔平居中和垂直居中。⽔平居中是⽐较容易的，直接设置元素的margin: 0 auto就可以实现。但是垂直居中相对来说是⽐较复杂⼀些的。下⾯我们⼀起来讨论⼀下实现垂直居中的⽅法。
  ⾸先，定义⼀个需要垂直居中的div元素，他的宽度和⾼度均为300px，背景⾊为橙⾊。代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
<style>
.content {
width: 300px;
height: 300px;
background: orange;
}
</style>
</head>
<body>
<div class="content"></div>
</body>
</html>
显⽰效果如下：
我们需要使得这个橙⾊的div居中，到底该怎么办呢？⾸先我们实现⽔平居中，上⾯已经提到过了，可以通过设置margin: 0 auto实现⽔平居中，代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
<style>
.content {
width: 300px;
height: 300px;
background: orange;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="content"></div>
</body>
</html>
效果如下
很好，已经实现⽔平居中了！接下来该打⼤boss了——实现垂直居中。不过，在这之前，我们先要设置div元素的祖先元素html和body的⾼度为100%（因为他们默认是为0的），并且清除默认样式，即把margin和padding设置为0（如果不清除默认样式<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
<style>
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.content {
width: 300px;
height: 300px;
background: orange;
margin: 0 auto; /*⽔平居中*/
}
</style>
</head>
<body>
<div class="content"></div>
</body>
</html>
  接下来，需要做的事情就是要让div往下移动了。我们都知道top属性可以使得元素向下偏移的。但是，由于默认情况下，由于position的值为static（静⽌的、不可以移动
的），元素在⽂档流⾥是从上往下、从左到右紧密的布局的，我们不可以直接通过top、left等属性改变它的偏移。所以，想要移动元素的位置，就要把position设置为不是static的
其他值，如relative,absolute,fixed等。然后，就可以通过top、bottom、right、left等属性使它在⽂档中发⽣位置偏移（注意，relative是不会使元素脱离⽂档流的，absolute和fixed
则会！也就是说，relative会占据着移动之前的位置，但是absolute和fixed就不会）。设置了position: relative后的代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
<style>
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.content {
width: 300px;
height: 300px;
background: orange;
margin: 0 auto; /*⽔平居中*/
position: relative; /*设置position属性*/
}
</style>
</head>
<body>
<div class="content"></div>
</body>
</html>
  我们刷新⼀下页⾯，发现跟之前是没有任何变化的，因为，我们仅仅是使设置了元素的position=relative⽽已，但是还没开始移动他的垂直偏移。好，下⾯我们就让它偏移html怎么让所有内容居中
吧！垂直偏移需要⽤到top属性，它的值可以是具体的像素，也可以是百分数。因为我们现在不知道⽗元素（即body）的具体⾼度，所以，是不可以通过具体像素来偏移的，⽽
应该⽤百分数。既然是要让它居中嘛！好，那么我们就让它的值为50%不就⾏了吗？问题真的那么简单，我们来试⼀下，就设置50%试⼀下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
<style>
html,body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.content {
width: 300px;
height: 300px;
background: orange;
margin: 0 auto; /*⽔平居中*/
position: relative; /*脱离⽂档流*/
top: 50%; /*偏移*/
}
</style>
</head>
<body>
<div class="content"></div>
</body>
</html>
效果如下图所⽰：
div垂直⽅向上⾯并没有居中。明显是偏下了。下⾯，我们在浏览器中间画⼀条红线⽤来参考，如下图：
  通过观察上图，只要让div的中⼼移动到红线的位置，那么整个div就居中了。那怎么让它中⼼移动到红线处呢？从图中可以观察到，从div的中⼼到红线的距离是div⾃⾝⾼度的⼀半。这时候，我们可以使⽤通过margin-top属性来设置，因为div的⾃⾝⾼度是300，所以，需要设置他的margin-top值为-150。为什么是要设置成负数的呢？因为正数是向下偏移，我们是希望div向上偏移，所以应该是负数，如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
<style>
html,body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.content {
width: 300px;
height: 300px;
background: orange;
margin: 0 auto; /*⽔平居中*/
position: relative;
top: 50%; /*偏移*/
margin-top: -150px;
}
</style>
</head>
<body>
<div class="content"></div>
</body>
</html>
效果如下
　确实已经居中了。好兴奋！有⽊有？！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
<style>
html,body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.
content {
width: 300px;
height: 300px;
background: orange;
margin: 0 auto; /*⽔平居中*/
position: relative;
top: 50%; /*偏移，如果top属性不起作⽤，也可以⽤margin-top*/
transform: translateY(-50%);
}
</style>
</head>
<body>
<div class="content"></div>
</body>
</html>
除了可以使⽤margin-top把div往上偏移之外，CSS3的transform属性也可以实现这个功能，通过设置div的transform: translateY(-50%)，意思是使得div向上平移（translate）⾃⾝⾼度的⼀半(50%)。如下：
上⾯的两种⽅法，我们都是基于设置div的top值为50%之后，再进⾏调整垂偏移量来实现居中的。如果使⽤CSS3的弹性布局（flex）的话，问题就会变得容易多了。使⽤CSS3的弹性布局很简单，只要设置⽗元素（这⾥是指body）的display的值为flex即可。具体代码如下，对代码不做过多的解释，如果想了解弹性布局的可以看阮⼀峰⽼师的博客：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。