css中关于居中的那点事儿
关于居中，无论是水平居中，还是垂直居中都有很多方式，下面我来介绍一些常用的。
第一部分：水平居中
1.实现行内元素的居中。方法：在行内元素外面的块元素的样式中添加：text-align:center;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{text-align: center;}
img{ 200px;height: 200px;border: thin solid red;}
</style>
</head>
<body>
<div>
<img src="pic.png">
</div>
</body>
</html>
注意：对于某个块元素的居中，不能在其父元素的样式中设置text-align:center，这是无效的。下面介绍块元素的居中方式。
2.实现块级元素的水平居中。
方法一：设置其左右两边的外补丁为auto。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{ 200px;height: 100px;background: red;margin:0 auto;}
</style>
</head>
<body>
<div>this is a div</div>
</body>
</html>
注意：如果块级元素是body的直接子元素，不设置宽，则默认100%，看不出效果；不设置高，且div中没有内容，则高度默认为0。因此，一定要同时设置块级元素的宽和高，这样才能看出来效果。对于在一个div中的另一个div希望居中，也可以使用这个方式，因为这时的margin是相对于其父元素而言的。
方法二：使用绝对定位和负边距。
代码如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin:0;padding: 0;}
#parent{ 500px;height: 300px;background: #ccc;margin: 0 auto;position:relative; }
#son{
100px;height: 100px;background: #aaa;text-align: center;
position: absolute; left: 50%; margin-left: -50px;
/*注意：因为绝对定位是left的值是相对于son的最左边为50%，所以需要使用margin-left再向左偏移宽度的一半 */
}
</style>
</head>
<body>
<div id="parent">
<div id="son">faas</div>
</div>
</body>
</html>
效果图如下：
第二部分：垂直居中
1.行内元素的垂直居中
A 我们在写导航菜单时，往往采用将<a>标签写入float的<li>中，且为了美观，我们常常需要将a标签中的内容水平居中和垂直居中。水平居中我们在上面已经介绍了，通过在字体的父元素内设置text-align:center;即可实现。那么垂直居中呢？对于文字而言，我们只需要将行高设置为字体所在块元素的高度即可。
html代码如下：
<body>
<ul>
<li><a href="">我</a></li>
<li><a href="">是</a></li>
<li><a href="">导</a></li>
<li><a href="">航</a></li>
<li><a href="">的</a></li>
</ul>
</body>
css代码如下：
<style>
*{padding: 0;margin: 0;list-style: none;text-decoration: none;}
ul li{float: left;/* 40px;height: 40px;*/}
a{display: block; 70px;height: 40px;background: #daa541;border:1px solid red;text-align: center;line-height: 40px;}
</style>
我把a标签的display属性值修改为了block，所以我们就可以修改a标签的宽度和高度了，因为li是包含a的，li会由其中的内容（即a标签）撑开，所以在li中的width和height是不需要设置的。
因为a成为了块级元素，所以水平居中只需要在a中添加text-decoration:none;即可。将line-height的高度和height的高度设置为相同的，就可以实现垂直居中了。
B 如果要对a标签中的字体居中，实际上还有一种更为简单的方法。
即将a的display属性设置位block之后，不设置其宽度和高度（li的宽度和高度也不设置），为了看清楚，我们可以给a加border，这时得到的效果图如下：
即a的大小完全是由字体撑开的，这时我们可以通过设置上下左右的padding值达到与A方法相同的效果。html代码与A中相同，css代码如下：
*{padding: 0;margin: 0;list-style: none;text-decoration: none;}
ul li{float: left;}
a{display: block;background: #daa541;border:1px solid red; padding:10px 30px;}
大家可以看到，这里我只设置了上下padding值为10px，左右padding值为30px;在A中的width height text-align(实现水平居中) line-height(实现竖直居中)这些属性全都没有设置，只使用了padding:10px 30px;来代替，所以这种方法是值得推荐的。
效果图如下：
C 另外一种方法也可以实现行内元素的垂直居中。
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin:0;padding: 0;}
#parent{ 500px;height: 300px;background: #ccc; display:table-cell; vertical-align: middle;}
</style>
</head>
<body>
<div id="parent">
<span>faas</span>
</div>
</body>
</html>
即我们将id为parent的div元素的display属性值设置位table-cell，这时，即让标签元素以表格单元格的形式呈现，类似于td标签。这时就可以通过设置vertical-align来实现垂直居中了。但值得注意的是：table-cell会被其他一些css属性破坏，比如float和position:absolute等等。且一旦设置位table-cell，这时margin就不能用了。这种方法也可以用于块级元素的垂直居中。
2.块级元素的垂直居中。
方法一：使用绝对定位和负边距。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin:0;padding: 0;}
#parent{ 500px;height: 300px;background: #ccc;margin: 0 auto;position:relative; }
#son{
100px;height: 100px;background: #aaa;text-align: center;
position: absolute;top: 50%;margin-top: -50px;
}
</style>
</head>
<body>
<div id="parent">
<div id="son">faas</div>
</div>
</body>
</html>
方法二：使用display：table-cell;方法。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin:0;padding: 0;}
#parent{ 500px;height: 300px;background: #ccc; display:table-cell; vertical-align: middle;}
</style>
</head>
<body>
<div id="parent">
<div>faas</div>
</div>
</body>
</html>
大家可以看出，这个方法与行内元素的垂直居中并没有什么区别。
方法三：使用display:flex;代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin:0;padding: 0;}
#parent{ 500px;height: 300px;background: #ccc; margin:0 auto;
display: flex; align-items:center; }
#parent>div{background: red; 100px;height: 100px;}
</style>
</head>
<body>
<div id="parent">
<div>faas</div>
</div>
</body>
</html>
在父元素中添加display:flex;align-items:center;即可实现竖直居中。
3.使用line-height居中。
即给父元素（块级元素）设置height和line-height相等，然后给子元素（inline-block 或者 inline元素) 设置vertical-align:middle即可，如下所示：
<!DOCTYPE html>
<html>
<head>
<title>forMiddle</title>
<style>
div{
500px;
height: 500px;
line-height: 500px;
background-color: #ddd;
}
a{
vertical-align: middle;
color:red;
}
</style>
</head>
<body>
<div>
<a href="">居中</a>
</div>
</body>
</html>
又如下所示：
<!DOCTYPE html>
<html>
<head>
<title>forMiddle</title>
<style>
div{
500px;
height: 500px;
line-height: 500px;
background-color: #ddd;
}
img{
vertical-align: middle;
color:red;
}
</style>
</head>
<body>
<div>
<img src="http://p0.so.qhmsg.com/bdr/_240_/t018cfb77d38a88e67f.jpg" alt="">
</div>
</body>
</html>
这种方式是非常值得学习了。
第三部分：水平竖直同时居中
方法一：使用绝对定位和负边距
代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin:0;padding: 0;}
#parent{ 500px;height: 300px;background: #ccc;margin: 0 auto;position:relative; }
#son{
100px;height: 100px;background: #aaa;text-align: center;
position: absolute;top: 50%;margin-top: -50px; left: 50%;margin-left: -50px;
}
</style>
</head>
<body>
<div id="parent">
<div id="son">faas</div>
</div>
</body>
</html>
效果如下：
方法二：使用display：flex。
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin:0;padding: 0;}
#parent{ 500px;height: 300px;background: #ccc; margin:0 auto;
display: flex; align-items:center; justify-content:center;}
#parent>div{background: red; 100px;height: 100px;}
</style>
</head>
<body>
<div id="parent">
<div>faas</div>
</div>
</body>
</html>
即只需要在父元素的样式中添加display：flex；align-items:center实现竖直居中，justify-content:center;实现水平居中。
方法三：同样使用display:flex.
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin:0;padding: 0;}
#parent{ 500px;height: 300px;background: #ccc; margin:0 auto;
display: flex; }
#parent>div{background: red; 100px;height: 100px; margin: auto;}
</style>
</head>
<body>
<div id="parent">
<div>faas</div>
</div>
</body>
</html>
我们发现只需要在父元素中设置display:flex;在子元素中设置margin：auto；即可实现居中，这种方法无疑是最简单的。