CSS布局中的水平垂直居中
各位好，先说两句题外话。今天是我开通博客园的博客第一天，虽然我申请博客园的账号已经有一年半了，但是由于各种原因迟迟没有开通自己的博客。今天非常有幸开通博客，在此也写一篇关于前端开发布局中经常用到的水平垂直居中的总结。第一次写博客，可能会存在有的地方表述不是那么清晰明了还请各位多多见谅。
废话不多说了，下面进入主题：下面的例子父元素div 高600px 宽800px， 子元素div的高400px 宽300px;
- 知道父元素div的宽和高，子元素在父元素中水平垂直居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>示例1</title>
<style type="text/css">
.parent{
width: 800px;
height: 600px;
background-color: #bbbbc2;
overflow: hidden;
}
.child{
width: 400px;
height: 300px;
margin: 150px 200px;
text-align: center;
font-size: 30px;
color: red;
background-color: #616161;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">示例1</div>
</div>
</body>
</html>
简单解释一下，这种方法是设置子元素的外边距达到水平垂直居中的效果，效果图如下：
2. 知道父元素div的宽和高，子元素在父元素中水平垂直居中（方法2）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>示例2</title>
<style type="text/css">
.parent{
width: 800px;
height: 600px;
background-color: #bbbbc2;
overflow: hidden;
}
.child{
width: 400px;
height: 300px;
margin: 150px auto;
text-align: center;
font-size: 30px;
color: red;
background-color: #616161;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">示例2</div>
</div>
</body>
</html>
示例2的效果和示例1的效果一样，就不截图占用篇幅了，大家可以自己试一下；
3. 知道父元素div的宽和高，子元素在父元素中水平垂直居中（方法3）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>示例3</title>
<style type="text/css">
.parent{
position: relative;
width: 800px;
height: 600px;
background-color: #bbbbc2;
overflow: hidden;
}
.child{
position: absolute;
width: 400px;
height: 300px;
left: 200px;
top: 150px;
text-align: center;
font-size: 30px;
color: red;
background-color: #616161;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">示例3</div>
</div>
</body>
</html>
简单解释一下，其中我将父元素采用相对定位，子元素采用绝对定位，子元素设置left 和 top 的距离即可达到水平垂直居中的效果
4. 知道父元素div的宽和高，子元素在父元素中水平垂直居中（方法4）
1 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>示例4</title>
<style type="text/css">
.parent{
position: relative;
width: 800px;
height: 600px;
background-color: #bbbbc2;
overflow: hidden;
}
.child{
position: absolute;
width: 400px;
height: 300px;
left: 50%;
top: 50%;
margin-top: -150px;
margin-left: -200px;
text-align: center;
font-size: 30px;
color: red;
background-color: #616161;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">示例4</div>
</div>
</body>
</html>
简单说一下，left和top采用百分比的方式取值，基数是对应父元素的宽和高。
5. 知道父元素div的宽和高，子元素在父元素中水平垂直居中（方法5）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>示例5</title>
<style type="text/css">
.parent{
position: relative;
width: 800px;
height: 600px;
background-color: #bbbbc2;
overflow: hidden;
}
.child{
position: absolute;
width: 400px;
height: 300px;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
text-align: center;
font-size: 30px;
color: red;
background-color: #616161;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">示例5</div>
</div>
</body>
</html>
说一下，这种方法还是比较好的，translate(-50%,-50%)，这里使用到了2D转换，里面又用到了百分数，不过这个百分数是基于当前元素的宽和高的，这是我自己常用的一种方式
6. 知道父元素div的宽和高，子元素在父元素中水平垂直居中（方法6）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>示例6</title>
<style type="text/css">
.parent{
display: flex;
justify-content: center;
align-items: center;
width: 800px;
height: 600px;
background-color: #bbbbc2;
}
.child{
width: 400px;
height: 300px;
text-align: center;
font-size: 30px;
color: red;
background-color: #616161;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">示例6</div>
</div>
</body>
</html>
解释一下，这里面用到了flex布局，此处就先不详细讲解，后续再写专门的文章进行讲解。
7. 知道父元素div的宽和高，子元素在父元素中水平垂直居中（方法7）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>示例7</title>
<style type="text/css">
.parent{
display: flex;
width: 800px;
height: 600px;
background-color: #bbbbc2;
}
.child{
width: 400px;
height: 300px;
margin: auto;
text-align: center;
font-size: 30px;
color: red;
background-color: #616161;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">示例7</div>
</div>
</body>
</html>
这里面也用到了flex布局，要听其中缘由，请听下回分解。
结束语：由于本人第一次写博客，多有不足，还请各位大神多多指教，谢谢！
flex布局参考文章：
阮一峰的文章 http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html