CSS篇 -- 居中和Grid布局

水平垂直居中：
法①：绝对定位+margin:auto
position: absolute;
left: 0; right: 0; top: 0; bottom: 0;
width: 200px;
height: 200px;
margin: auto;

法②:display:inline-block 和vertical-align:middle和伪元素:after或:before
.container{
  background-color: rgba(0, 0, 0, .15);
  text-align: center;
  font-size: 0;
  white-space: nowrap;
  overflow: auto;
}
.container:before{
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
.dialog{
  display: inline-block;
  width: 400px;
  height: 400px;
  vertical-align: middle;
  text-align: left;
  font-size: 14px;
  white-space: normal;
  background: white;
}

<div class="container">
  <div class="dialog">自适应弹出层</div>
</div>

法③：flex布局
.box {
  display: flex;
  justify-content: center;
  align-items: center;
}

 
<div class="box">
  <span class="item"></span>
</div>

 

法④:translate+绝对定位

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);

当使用：top: 50%;left: 50%;， 是以左上角为原点，故不处于中心位置
translate(-50%,-50%) 作用是，往上（x轴）,左（y轴）移动自身长宽的 50%，以使其居于中心位置

网格布局介绍
（1）网格布局
display:grid;或display:inline-grid指定一个容器采用网格布局
注意：设置为网格布局后，容器子元素（项目）的float、display:inline-block、display:table-cell、
vertical-align和column-*等设置都会失效。
注意容器子元素（项目）指的是容器的顶层子元素，不包含项目的子元素。Grid 布局只对项目生效。

容器属性：
①display:grid|inline-grid
②grid-template-columns和grid-template-rows属性：分别定义每一列的列宽和行高
.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;//采用具体值
  grid-template-rows: 100px 100px 100px;
}

.container {
  display: grid;
  grid-template-columns: 33.33% 33.33% 33.33%;//采用百分比
  grid-template-rows: 33.33% 33.33% 33.33%;
}

.container {
  display: grid;
  grid-template-columns: repeat(3, 33.33%);//采用repeat函数，简化重复值
  grid-template-rows: repeat(3, 33.33%);

grid-template-columns: repeat(2, 100px 20px 80px);//这样重复表示一共六列（即重复两次）
}

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, 100px);//固定填充，每列宽度一样
}

.container {
  display: grid;
  grid-template-columns: 1fr 2fr; //fr表示比例关系，第二列是第一列宽的两倍
}

.container {
  display: grid;
grid-template-columns: 1fr 1fr minmax(100px, 1fr);//表示长度范围，在这两个之间
}

.container {
  display: grid;
grid-template-columns: 100px auto 100px;//表示浏览器自己决定第二列的宽度，
//基本上等于该列单元格的最大宽度，除非单元格内容设置了min-width，且这个值大于最大宽度。
}

.container {
  display: grid;
  grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4];//方括号表示每一根网格线的名字
  grid-template-rows: [r1] 100px [r2] 100px [r3] auto [r4];
}
③grid-row-gap和grid-column-gap属性分别表示行与行之间的间隔和列与列之间的间隔
grid-gap属性是grid-column-gap和grid-row-gap的合并简写形式，语法如下。
grid-gap: <grid-row-gap> <grid-column-gap>
例子：
grid-row-gap: 20px;
grid-column-gap: 20px;
如果grid-gap省略了第二个值，浏览器认为第二个值等于第一个值。
注意：根据最新标准，上面三个属性名的grid-前缀已经删除，
grid-column-gap和grid-row-gap写成column-gap和row-gap，grid-gap写成gap。

④grid-template-areas属性：网格布局允许指定区域，一个区域由单个或多个单元格组成。
这个属性用于定义区域。
.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
  grid-template-areas: 'a b c'
                       'd e f'
                       'g h i';
}
上面代码先划分出9个单元格，然后将其定名为a到i的九个区域，分别对应这九个单元格。

多个单元格合并成一个区域的写法如下。

grid-template-areas: 'a a a'
                     'b b b'
                     'c c c';
上面代码将9个单元格分成a、b、c三个区域。
如果某些区域不需要利用，则使用"点"（.）表示。

grid-template-areas: 'a . c'
                     'd . f'
                     'g . i';

注意：
区域的命名会影响到网格线。每个区域的起始网格线，会自动命名为区域名-start，终止网格线自动命名为区域名-end。

比如，区域名为header，则起始位置的水平网格线和垂直网格线叫做header-start，终止位置的水平网格线和垂直网格线叫做header-end。

⑤grid-auto-flow属性：默认是row即先行后列，如果设置为column则变成先列后行
还可以设置为row dense和column dense这两个值主要用于，某些项目指定位置以后，剩下的项目怎么自动放置。

⑥justify-items和align-items分别设置单元格内容的水平位置（左中右）和垂直位置（上中下）
这两个属性的写法完全相同，都可以取下面这些值
start 对齐单元格的起始边缘
end  对齐单元格的结束边缘
center 单元格内部居中
stretch 拉伸，占满单元格的整个宽度

place-items属性是align-items属性和justify-items属性的合并简写形式。
语法为place-items: <align-items> <justify-items>;
如果省略第二个值，则浏览器认为与第一个值相等

⑦justify-content和align-content分别设置整个内容区域在容器里面的水平位置（左中右）和垂直位置（上中下）
这两个属性的写法完全相同，都可以取下面的值
start  对齐容器的起始边框
end  对齐容器的结束边框
center 容器内部居中
stretch 项目大小没有指定时，拉伸占据整个网络容器
space-around 每个项目两侧的间隔相等,所以项目之间的间隔比项目与容器边框的间隔大一倍
space-between 项目的间隔相等，项目与边框之间没有间隔
space-evenly 项目与项目的间隔相等，项目与容器边框之间也是同样长度的间隔。

place-content属性是align-content和justify-content属性的合并简写形式。
语法：place-content: <align-content> <justify-content>
如果省略第二个值，浏览器就会假定第二个值等于第一个值。

⑧grid-auto-columns和grid-auto-rows属性用来设置浏览器自动创建的多余的网格的列宽和行高，他们
的写法同grid-template-columns和grid-template-rows,如果不指定这两个属性，浏览器完全根据单元格内容
的大小，决定新增网格的列宽和行高。
⑨grid-template属性是grid-template-columns、grid-template-rows和grid-template-areas这三个属性的合并简写形式。

grid属性是grid-template-rows、grid-template-columns、grid-template-areas、 grid-auto-rows、grid-auto-columns、grid-auto-flow这六个属性的合并简写形式。

从易读易写的角度考虑，还是建议不要合并属性。

项目属性
①grid-column-start、grid-column-end、grid-row-start、grid-row-end属性分别指定
左边框，右边框，上边框和下边框所在的水平网格线

.item-1 {//指定项目1的各个边框是哪根网格线
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 2;
  grid-row-end: 4;
}

.item-1 {//还可以指定为网格线的名字
  grid-column-start: header-start;
  grid-column-end: header-end;
}

.item-1 {//还可以使用span关键字，表示左右上下边框之间跨越了多少个网格
  grid-column-start: span 2;
  grid-column-end: span 2;//注意这两行一个意思，随便写一个就行
}
注意：使用这四个属性，如果产生了项目的重叠，则使用z-index属性指定项目的重叠顺序即可

②grid-column属性和grid-row属性
grid-column属性是grid-column-start和grid-column-end的合并简写形式
grid-row属性是grid-row-start和grid-row-end的合并简写形式
语法：
.item {
  grid-column:  / ;
  grid-row:  / ;
}
例子
.item-1 {
  grid-column: 1 / 3;
  grid-row: 1 / 4;
}
/* 等同于 */
.item-1 {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 4;
}
也可以使用span关键字
.item-1 {
  background: #b03532;
  grid-column: 1 / span 2;
  grid-row: 1 / span 3;
}

斜杠以及后面的部分可以省略，默认跨越一个网格
.item-1 {
  grid-column: 1;
  grid-row: 1;
}

③grid-area属性指定项目放在哪个区域
.item-1 {
  grid-area: e;//1号项目位于e区域
}
这个属性还可用作grid-row-start、grid-column-start、
grid-row-end、grid-column-end的合并简写形式，直接指定项目的位置。
语法：.item {
  grid-area: <row-start> / <column-start> / <row-end> / <column-end>;
}

④justify-self属性、align-self属性分别设置单元格内容的水平位置（左中右）和垂直位置（左中右）
和justify-items属性和align-items属性写法完全相同，只是作用于单个项目
start：对齐单元格的起始边缘。
end：对齐单元格的结束边缘。
center：单元格内部居中。
stretch：拉伸，占满单元格的整个宽度（默认值）。

place-self属性是align-self属性和justify-self属性的合并简写形式，如果省略第二个值，place-self属性会
认为两个值相等。