小白手记 居中

水平居中里面：

• 对一个div，让其margin-left 和 margin-right 都为auto；
• 在父容器上用text-align:center，让一个块元素里面的行内元素针对父容器居中；

垂直居中里面：
vertical-align:middle，貌似和text-align:center长的很像，但是她的功能，并不是全部有效的，她是在表格中有效。
想让她有效，要满足下面两个条件：

• 表格中，对 td（行内元素）；
• 或者让她的子元素display:table-cell
  都可以让内部的行内元素，基于整个父容器的基线去居中，但是又会带来一个影响，把块级元素都变成了行内元素。

如何在让一个板块里面，所有的元素都水平垂直居中捏？

• 在我们的目标容器上设置

.wrap-center{    
display: table-cell;    
width: 100%;   
height: 666px;    
vertical-align: middle;    
text-align: center;    
background-color: blanchedalmond;}

• 然后在目标容器的父容器上设置

.wrap{    
width: 100%;    
display: table;
}

下面是一个失败的过程：

瑞鹤桑自己，一开始学习的时候，没有对目标容器的父容器加 display:table；，结果喜闻乐见的宽度根据内容来，毕竟变成了行内元素了，宽度靠内容撑开嘛！

宽度只有内容宽了

然后我想了一个歪招，把目标容器的宽度由100%改成一个很大的固定值，貌似是看起来好了

目标容器添加很大的固定宽度之后

但是，别人浏览器拉开的宽度大于你设置的固定值， 瞬！间！爆！炸

瑞鹤桑自己一开始用笔记本调试，最后放到显示器上就露馅了

最后才知道，原来需要在目标容器的父容器上设置一个 display:table；，就OK啦

很惭愧，一个小白，只能做一点微小的工作