多行文字垂直居中

方法一

span{
  display:inline-block;
  line-height:normal;
  vertical-align:middle;
}

div{
height: 200px;
line-height:200px;}

方法2

通过一个伪元素，将高度拉长，然后宽度设置为0，

span{
  font-size:16px;
  display:inline-block;
  vertical-align:middle;
}

div{
height: 200px;
  font-size:0;
}

div:before{
content:'';
display:inline-block;
height: 100%;
width: 0px;
vertical-align:middle;}

方法3

通过flex，在flex中匿名文本也相当于被一个元素所包裹

section{
  display:flex;
  height: 200px;
  align-items:center;
}

方法四

可以通过table-cell实现

.outer3{
  /*表单元格不能有margin*/
  display:table-cell;
  vertical-align:middle;
  text-align:center;
}
.inner3{
  width: 50px;
  height: 50px;
}

移动端布局

标尺图片中的一个像素，就是对应窗口的一个像素(也叫做一个css像素)
移动端布局和桌面端布局有很大的不同，pc上屏幕都足够大，但手机尺寸及分辨率都各不相同，且物理尺寸很小，于是就造成了在pc和手机上完全的不同策略，在pc上一般都是定宽居中，而且这个定宽是比一般电脑的显示器要小，主体区域不管在哪个电脑上都是一样的大小，只是留白不一样。
手机上的布局都不是这样的，手机的屏幕比较小，没有空间用来留白。所以手机网页或app都是占满手机宽度的。手机上也没有窗口的概念。一般app都是占满全屏的。而且手机屏幕物理尺寸各不相同，分辨率也各不相同（一般是1080的）。
当手机屏幕就是整个浏览器窗口的时候，它的CSS像素宽度是350css像素左右。
不同的电脑在浏览器全屏的时候，视口的css尺寸也是不一样的。但是在电脑上，视口大小都是足够大的。所以我们才能定宽设计，因为设计的宽度往往是小于屏幕宽度的。
由于手机物理像素的大小都非常小，所以手机网页代码中的1px往往不是手机屏幕的一个物理像素。为了编码习惯，一般厂商是将手机浏览器的视口宽度设置为相同物理尺寸下电脑显示器的像素数量：手机屏幕一般是6cm宽左右，而普通的电脑显示器6cm宽一般是300像素左右，再考虑手机离人很近，所以一般将视口大小设置成350css像素左右，但是也有浮动的，跟厂商以及手机的物理尺寸有关，一般在300-500之间，即不同型号的手机视口宽度不一样。但是，我们又希望我们的网页，能占满宽度

viewport标签

 <meta name="viewport" content="width=device-width, initial-scale=1.0">

当页面没有声明这个标时，因为历史遗留原因，手机浏览器会认为这是为电脑设计的网页，所以会用电脑上典型的浏览器窗口来渲染页面，一般再1000px左右
当页面声明这个标签时，手机浏览器会认为这个页面是为移动端设计的，所以会按照声明来,只被手机浏览器识别，不被电脑浏览器识别。
作用是设定手机浏览器使用多宽的窗口来渲染页面。
width=device-width，这个就是用来设定手机浏览器窗口宽度的，可以为数字，如果为数字，那么就固定浏览器窗口的大小在任何手机上都是一样的，也可以为一个预置值：device-width，device-width就是为出厂设定的，不同手机不一样，一般屏幕的物理尺寸越大，它越大。当它为数字时，也就是说，开发者可以通过这个标签将所有手机浏览器的视口宽度设置为相同的。但是，比较旧的手机（安卓5.0以下），不能将该值设置为数字，而只能写device-width。
initial-scale=1.0,这个是初始放大倍数。

典型的手机网页设计

一种是类似手机软件一样，等比例的设计，在不同的手机上，按钮大小不一样，但整体布局比例一样。例子:小米移动端首页，如果设备支持，那么设计图有多宽，content=就等于多宽，这样依赖，相当于开发者面对的手机都有相同的浏览器窗口，直接用量出来的尺寸加上px单位就可以了，如果设备不支持，content写为数值，则可以使用vw开发，先将设计图缩放为宽度1000，然后量出设计图中354像素时，就在代码中写35.4vw，所有的长度单位都使用vw，包括字号，边框等等，但是此方法的问题是，对设计图进行了缩放，图片内的一些边缘会发糊，导致测量尺寸不准。
我们希望，即不对设计搞进行缩放，也能够直接测量出来的尺寸直接用在代码里，即假设设计稿的宽度为x，那么我们希望x（rem） = 屏幕宽度=100vw，即html{font-size:100vw/x}，又由于100vw / x后的结果可能很小，小于1px，有些浏览器会限制最小字号(谷歌浏览器12px)，所以要乘上100倍。这样我们就不用缩放设计图，而是直接使用从设计图里测量出来的尺寸，加上rem单位即可。在不支持vw或calc的浏览器上，通过js读到窗口宽度的px单位，除以X * 100，设置到html的字号上就行了（小米商城就是这么做的）。
注意，如果设置了rem单位，那么会使幽灵字符变大，从而导致布局上的混乱，我们可以通过把body的font-size设置为initial，从而解决
另一种是，像pc上的流式布局一样，内容更多是以文字为主，没有太多需要保持比例的布局的网站。例子：github，这种布局直接写content=device-width即可，然后使用常规块元素布局，配合media quary，px为单位开发即可。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <style>
    *{
  background-color: rgba(0,0,0,0.08);
  box-shadow:inset 0 0 1px red;
}
html{
  font-size:calc(100vw /750 *100);
}
body{
  margin: 0;
}
div{
  width: 7.50rem;
  height:3rem;
}

main{
  width: 7.5rem;
}
section:first-child{
  margin-right:0.5rem;
}
section{
  
  width: 3.5rem;
  height: 3.5rem;
  float:left;
}
  </style>
</head>
<body>
<div></div>
<main>
  <section></section>
  <section></section>
</main>
</body>
</html>

少见的第三种设计：对于布局想要保持比例，但文字内容跟屏幕大小呈正相关的网站，可以使用device-width，这样做让文字保持默认大小16px，空间越大字越多，但页面布局及元素大小，仍然使用rem等比缩放布局。

grid布局

grid布局是二维布局，其他布局都是一维布局，类似于表格一样，先将父元素分成若干块，然后选取其中几块用。

grid container

上图的大黑框就是grid container

grid lines

上面的红色虚线就是grid-lines，把父元素分成若干块，用来分割行和列，这些线都是不存在的，想像出来的

grid tracks

一整行或者一整列就是一个轨道，行和列的统称就是一个轨道

grid cells

一个一个的小格子叫做grid cells

grid areas

多个grid cells组成的一个矩形就是一个grid areas

grid items

grid元素的直接子元素叫做grid items，比如说div是grid元素，然后在div 里面有一个span，那么span就是div的直接子元素。

例子

为了grid布局，设置了一个单位（fr），这个就是将剩下的空间分成几份。
如果template设置为了auto，相当于1fr
grid-template-columns和grid-template-rows这两属性就是给父元素打边框
grid-auto-rows：50px/grid-auto-colums：50px:这两个是在默认不知道有多少行或者多少列的时候，设置行或者列的宽度或者高度。
gird-auto-flow，这个控制grid的走向，值有column（纵向排列向右折行）和row
可以堆叠，设置z-index即可。
justify-content，设置整个布局的位置，可以是left，right，space-between，space-around，space-evenly
align-items:center，start，end，stretch，baseline，元素在格子里面的摆法
align-content：center，所有的格子摆在中间，值还有space-between，space-around，space-evenly
align-self：center。这个可以设置其中一个元素在格子中的位置。
gap是空隙。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
  <style>
  *{
  background-color: rgba(0,0,0,0.08);
  box-shadow:inset 0 0 1px red;
}

html{
  zoom:2;
}

section{
  xwidth: 200px;
  height: 200px;
  display:grid;
    /*这两个属性用来分份,repeat(3,50px)这句话就等价于50px,50px,50px,也可以使用百分比*/
  grid-template-columns: repeat(3,50px) 1fr 2fr auto;
  grid-template-rows:40px 130px 30px;
}
div:first-child{
  grid-row-start:2;
  /*不包含第四行*/
  /*grid-row-end:span 2,这个意思是从起点开始跨越两行*/
  /*简写形式：grid-column:2/3;grid-row:1/span 3*/
  grid-row-end:4;
  grid-column-start:3;
  grid-column-end:5;
}
</style>
<body>
<section>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</section>
</body>
</html>

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      background-color: rgba(0, 0, 0, 0.08);
      box-shadow: inset 0 0 1px red;
    }

    section {
      float: left;
      display: grid;
      grid-template-rows: repeat(6, 40px);
      grid-auto-flow: column;
      grid-auto-columns: 100px;
    }

  </style>
</head>

<body>
  <section class="a">
    <div class="b">01</div>
    <div class="b">02</div>
    <div class="b">03</div>
    <div class="b">04</div>
    <div class="b">05</div>
    <div class="b">06</div>
    <div class="b">07</div>
    <div class="b">08</div>
    <div class="b">09</div>
    <div class="b">10</div>
    <div class="b">11</div>
    <div class="b">12</div>
    <div class="b">13</div>
    <div class="b">14</div>
    <div class="b">15</div>
  </section>
</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      background-color: rgba(0, 0, 0, 0.08);
      box-shadow: inset 0 0 1px red;
    }

    section.a {
      display: grid;
      grid-template-columns: repeat(3, 50px);
      grid-auto-rows: 50px;
      gap:5px;
    }

    div.b:nth-child(12n+4),
    div.b:nth-child(12n+11) {
      grid-row: span 2;
      grid-column: span 2;
    }

  </style>
</head>

<body>
  <section class="a">
    <div class="b">01</div>
    <div class="b">02</div>
    <div class="b">03</div>
    <div class="b">04</div>
    <div class="b">05</div>
    <div class="b">06</div>
    <div class="b">07</div>
    <div class="b">08</div>
    <div class="b">09</div>
    <div class="b">10</div>
    <div class="b">11</div>
    <div class="b">12</div>
    <div class="b">13</div>
    <div class="b">14</div>
    <div class="b">15</div>
  </section>
</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      background-color: rgba(0, 0, 0, 0.08);
      box-shadow: inset 0 0 1px red;
    }

    section.a {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      grid-template-rows: repeat(4, 50px);
      grid-gap: 5px;
    }

    div.b {
      grid-row: span 2;
    }

    div.b:first-child {
      grid-row: span 4;
    }

    div.b:nth-last-child(-n+2) {
      grid-row: span 1;
    }

  </style>
</head>

<body>
  <section class="a">
    <div class="b">01</div>
    <div class="b">02</div>
    <div class="b">03</div>
    <div class="b">04</div>
    <div class="b">05</div>
    <div class="b">06</div>
    <div class="b">07</div>
    <div class="b">08</div>
    <div class="b">09</div>
    <div class="b">10</div>
  </section>
</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      background-color: rgba(0, 0, 0, 0.08);
      box-shadow: inset 0 0 1px red;
    }

    section.mail {
      height: 200px;
      display: grid;
      grid-template-columns: 100px 1fr;
      grid-template-rows: 50px 1fr;
    }

    .main div {
      overflow: auto;
    }

    .mail div:first-child {
      grid-column: span 2;
    }

  </style>
</head>

<body>
  <section class="mail">
    <div></div>
    <div></div>
    <div></div>
  </section>
</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      background-color: rgba(0, 0, 0, 0.08);
      box-shadow: inset 0 0 1px red;
    }

    html,
    body {
      height: 100%;
    }

    .oald {
      height: 100%;
      display: grid;
      grid-template-columns: 80px 1fr 80px 80px;
      grid-template-rows: 60px 1fr;
      grid-auto-flow: column;
    }

    .side {
      grid-row: span 2;
    }

  </style>
</head>

<body>
  <section class="oald">
    <div class="side"></div>
    <div></div>
    <div></div>
    <div class="side"></div>
    <div class="side"></div>
  </section>
</body>

</html>

居中总结

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <style>
    * {
      background-color: rgba(0, 0, 0, 0.08);
      box-shadow: inset 0 0 1px red;
    }

    body>div {
      width: 200px;
      height: 200px;
      margin: 30px;
    }

    /*定位的缺点是内部元素必须定宽高,外部元素不用定高*/
    .outer1 {
      position: relative;
    }

    .inner1 {
      width: 50px;
      height: 50px;
      position: absolute;
      margin: auto;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
    }

    /*好处：内部元素可以比外部元素大，内部外部元素都不用定高，运用了2d偏移和定位*/
    .outer2 {
      position: relative;
    }

    .inner2 {
      position: absolute;
      width: 50px;
      height: 50px;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    /*用table-cell实现
是常规流，没有定位
内部元素需要比外部元素小*/
    .outer3 {
      /*表单元格不能有margin*/
      display: table-cell;
      vertical-align: middle;
      /*如果中间是文字，用这个*/
      text-align: center;
    }

    .inner3 {
      width: 50px;
      height: 50px;
      /*如果里面是块元素，用marign：auto；*/
      margin: auto;
    }

    /*内部元素可以比外部元素大
这个可以算两种，margin：auto单独算一种*/
    .outer4 {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .inner4 {
      margin: auto;
    }

    /*行内布局
一行的高度就是元素的高度，内部元素vertical-align为middle
内部元素可以不定高*/
    .outer5 {
      line-height: 200px;
      text-align: center;
      font-size: 0;
    }

    .inner5 {
      display: inline-block;
      width: 50px;
      height: 50px;
      vertical-align: middle;
      font-size: 16px;
      line-height: normal;
    }

    .outer6 {
      display: grid;
      align-items: center;
      justify-content: center;
    }

    .inner6 {
      width: 50px;
      height: 50px;
    }

  </style>
</head>

<body>
  <div class="outer1">
    <div class="inner1"></div>
  </div>

  <div class="outer2">
    <div class="inner2"></div>
  </div>

  <div class="outer3">
    <div class="inner3">lmpfdsfsdf</div>
  </div>

  <div class="outer4">
    <div class="inner4">Lorem ipsum adipr, deserunt.</div>
  </div>

  <div class="outer5">

    <div class="inner5"></div>
  </div>
  <div class="outer6">
    <div class="inner6"></div>
  </div>
</body>

</html>