现在很多网页都会有那种类似于Grid布局的布局，今天我就自己试试写一个出来，具体效果图如下：
一、首先是一个盒子的垂直水平居中：
<style>
*{
margin:0;
padding: 0;
box-sizing: border-box;
}
.parent{
border:1px solid red;
width:100%;
height: 300px;
font-size: 16px;
text-align: center;
}
.box{
border: 1px solid black;
display: inline;
padding-left:100px;
padding-bottom:80px;
line-height: 220px;
}
</style>
<div class="parent">
<div class="box box1">
</div>
</div>
这里设置了display:inline出现了几个问题：
1.长宽高不能设置了，margin-top/bottom不能设置
- 解决办法：将盒子设置会border-box,用padding来撑开
2.元素的高度是跟随这当前元素的font-size来变化的
- 解决办法：每个元素设置一个font-size(这样有一点冗余)
3.line-height：父元素的高度这样设置会出现偏移
- 解决办法：line-height的值 = 父元素的高度 - padding-bottom的值
一个盒子居中了，那么两个怎么弄呢，并且他们相隔的距离要一样的
1.一开始我的思路使用margin-left:百分比的方法，但是他这百分比不会随着父元素的大小变化而变化。
2.然后我换了一种思路：用rem来动态设置距离的值
- 首先通过JS代码设置根元素<html>的font-size大小
- 然后再设置盒子的margin-left的值
JS代码：
var rootSize = document.querySelector("body").clientWidth / 7.5;
document.querySelector("html").style.fontSize = rootSize + "px"css代码：
.parent{
border:1px solid red;
width:100%;
height: 300px;
font-size: 16px;
}
.box{
font-size: 16px;
border: 1px solid black;
display: inline;
padding-left:100px;
padding-bottom:80px;
margin-left: 2rem;
line-height: 220px;
}只要根据盒子的数量来调整margin-left的大小就可以了。
这里设置了根元素html的font-size值后出现了一个问题：就是
原因：因为这些值是根据当前元素的font-size来设置的，所以只要把父元素的font-size设置为浏览器的默认值就可以了。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。