在拿到PSD的时候，经常要考虑到自适应和居中问题，常用的水平居中方案有两种：

• margin:0 auto;
• position:absolute,left:50%,marigin-left:-px;

初期我选择的是第一种，毕竟第二种需要手动计算盒子模型的宽度。

直接给body设置：

body{
  width:1200px;
  margin:0 auto;
}

这样整个页面就会居中显示，并取巧的达到了页面自适应，因为body的最小宽度为1200px，不会出现分辨率过低造成的排版问题。

可一旦有了全屏的banner图或者底部信息展示需要自适应屏幕，达到100%浏览器宽度的展示，那么问题就来了。

于是我便对需要100%宽度的容器设置：

.warp-center{
  position:absolute;
  left:0;
  right:0;
}

因为在body或者html没有设置定位属性的情况下，盒子模型的完全定位是相对于浏览器窗口进行定位的。如此一来该div就可以突破body宽度的限制，达到100%浏览器宽度。

但是依然会有问题，设置了完全定位后的盒子模型会脱离文档流，将它后面的元素遮盖住。除非你把它放在最后面，不然就不得不给它之后的元素设置一个margin-top，于是我就放弃了这种方案。

新的方案是写一个居中容器，在需要居中元素的时候增加类名：

.warp-center{
  width:1200px;
  margin:0 auto;
}

但是这不够自适应，容器宽度被限定在1200px，于是我就转向了Flex布局：

.warp-center{
  display:flex;
  flex-flow: column;
  align-items: center;
}

这下居中容器下所有的元素都被居中了，并且宽度也不存在限制。但还不够完美，因为所有的元素都只能居中，不能随心所欲的控制。