CSS水平垂直居中
水平居中有margin: 0 auto，但是开发中经常要用到垂直居中，现在来看下平时常用的方法有哪些
一、position + margin 方法
（也是最常见的，包括相对定位或绝对定位）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>元素居中</title>
<style>
.c_relative{/*相对定位居中*/
width: 800px;
height:200px;
border: 2px solid #000;
}
.c_relative>div{
position: relative;
top:50%;
left: 50%;
margin-top: -50px;
margin-left: -150px;
width:300px;
height:100px;
background: #FFC615;
}
.c_absolute{/*绝对定位居中*/
position: relative;
width: 800px;
height:200px;
border: 2px solid #000;
}
.c_absolute>div{
position: absolute;
top:50%;
left: 50%;
margin-top: -50px;
margin-left: -100px;
width:200px;
height:100px;
background: #FFC615;
}
</style>
</head>
<body>
<div class="c_relative" style="">
<div></div>
</div>
<div class="c_absolute" style="">
<div></div>
</div>
</body>
</html>
二、position + transform 方法（CSS3）
方法一有个很明显的不足，就是需要提前知道元素的尺寸。否则margin负值的调整无法精确。为此，往往要借助JS获得。
CSS3的兴起，使得有了更好的解决方法，就是使用transform代替margin. transform中translate偏移的百分比值是相对于自身大小的，于是，我们可以：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>元素居中</title>
<style>
.c_relative{/*相对定位居中*/
width: 800px;
height:200px;
border: 2px solid #000;
}
.c_relative>div{
position: relative;
top:50%;
left: 50%;
transform: translate(-50%, -50%); /* 50%为自身尺寸的一半 */
width:300px;
height:100px;
background: #d185e4;
}
.c_absolute{/*绝对定位居中*/
position: relative;
width: 800px;
height:200px;
border: 2px solid #000;
}
.c_absolute>div{
position: absolute;
top:50%;
left: 50%;
transform: translate(-50%, -50%); /* 50%为自身尺寸的一半 */
width:200px;
height:100px;
background: #d185e4;
}
</style>
</head>
<body>
<div class="c_relative" style="">
<div></div>
</div>
<div class="c_absolute" style="">
<div></div>
</div>
</body>
</html>
问题是CSS3的transform，兼容性不好。需要IE9(-ms-), IE10+以及其他现代浏览器才支持。
三、position + margin:auto 方法实现绝对定位元素的居中
<html>
<head>
<style>
html,body{
height:100%
}
.wrapper{
position: relative;
text-align: center;
height: 300px;
background: #FF0;
}
.wrapper .content{
height: 100px;
background: red;
width: 200px;
position: absolute;/*只能用绝对定位*/
left: 0; top: 0; right: 0; bottom: 0;
margin: auto; /* 有了这个就自动居中了 */
}
</style>
</head>
<body>
<div class="wrapper">
<div class="content">some content</div>
</div>
</body>
</html>
margin:auto ，这样的我们一般认为不生效的，至于为什么可用，鑫大神有解释
四、inline-block + vertical-align 方法(不独占一行的块级元素)
直接使用inline-block,其vertical-align不生效，必须使用伪元素，或者插入一个隐藏元素
<html>
<head>
<style>
html,body{
height:100%
}
.wrapper{
text-align: center;
height: 300px;
background: #FF0;
}
.wrapper .content{
height: 100px;
line-height: 100px; /* 这里为了垂直居中content只的内容*/
width: 200px;
background: red;
display:inline-block;
vertical-align:middle;
}
.wrapper:before{/* 这里是关键，用来撑开wrapper,伪元素宽为0，高为300px, 因为是display:inline-block，会与content在一行，所以能垂直居中*/
content:"";
display:inline-block;
height:100%;
vertical-align:middle;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="content">some content</div>
</div>
</body>
</html>
当然，不用伪元素也行，如下
<html>
<head>
<style>
html,body{
height:100%
}
.wrapper{
text-align: center;
height: 300px;
background: #FF0;
}
.wrapper .content{
height: 100px;
line-height: 100px; /* 这里为了垂直居中content只的内容*/
width: 200px;
background: red;
display:inline-block;
vertical-align:middle;
}
.content_h{/*不用伪元素也行*/
display:inline-block;
height:100%;
vertical-align:middle;
width:0px;
overflow: hidden;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="content">some content</div><div class="content_h">我是用来撑开行高的</div>
</div>
</body>
</html>
至于为什么要要伪元素或隐藏的兄弟元素撑开才行呢？我想应该还是inline-block的特性有关，首先inline-block其实还是一个块级元素，只是不独占一行，而vertical-align 、 line-height只行级才有效，所以在wrapper里设置vertical-align和line-height，content没有接收，而当有两个高度不一至的inline-block在一行时，vertical-align才有效。
五、flex 方法(一种简单的垂直居中布局的方法)
据说：Flex 布局将成为未来布局的首选方案
<html>
<head>
<style>
html,body{
height:100%
}
.vertical-container {
height: 300px;
background: #60e483;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
}
.vertical-container .content{
height: 100px;
background: red;
width: 200px;
}
</style>
</head>
<body>
<div class="vertical-container">
<div class="content">some content</div>
</div>
</body>
</html>
