css - 常用 垂直/水平居中 + 左右布局

主要内容	学习文献
元素居中	胡子哥 — 谈一谈我在阿里的成长 + 2
左右布局	几种常见的CSS布局 —— 掘金
BFC	实现三栏布局的几种方法—— github
实现多列等高布局
—
	水平垂直居中，面试必考题 - 颜海镜 —— 小志-span标签居中兼容好
腾讯钗哥的两道前端面试题	前端周刊-博主+ CSS学习笔记+小志面试2
腾讯白树的两端对齐方法

摘自颜海镜的博客：

参考文献：最全面的水平垂直居中方案与flexbox布局

1、纯css未知高度图片垂直居中：

父元素设置 display: table-cell;这个时候元素的父元素就相当于变成了表格的单元格，再这个单元格设置vertical-align:middle;即可实现内容垂直居中；

这种方法的优点在于对低版本的浏览器兼容性很好，可以放心使用；

<div class="box">
   <img src="http://pics.taobao.com/bao/album/promotion/taoscars_180x95_071112_sr.jpg" class="img" />
</div>

css:
.box {
   //非IE的主流浏览器识别的垂直居中的方法
   display: table-cell;
   vertical-align:middle;
   text-align: center;
   
   width: 200px;
   height: 200px;
   border: 1px solid #eee;
}

.box .img {
   //设置图片垂直居中
   vertical-align: middle;
}

---

2、利用定位和位移 transform: translate(x , y); 在未知宽高的情况下：

给要居中的子元素设置绝对定位 position: absolute;
而元素的父级添加相对定位 position: relative; 限制绝对定位元素在其盒子内部；

/* 代码：*/
.box {
  width: 100%;
  height: 100%;
  position: relative;
}
.box .img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 100px;
  transform: translate(-50%, -50%);
}

当父元素是长方形的宽度时 ，.img可以用 width: 100%;
当父元素是正方形的宽度时 ，.img可以用 height: 100%;
适合未知宽高的情况下，元素水平垂直居中；

---

布局篇：

flex左右布局可以参考WEUI组件的写法；地址：weui组件
1、固定宽高左浮动，右侧自适应

.wrap {
    width: 80%;
    height: 400px;
    margin: 0 auto;
    border: 1px solid red;
}

.left {
    width: 200px;
    height: 300px;
    float: left;
    background: #ccc;
}

.right {
    height: 100%;
    margin-left: 200px;
    background: #ddd;
}

.clearfix {
    zoom: 1;
}

.clearfix:after {
    content: '.';
    display: block;
    height: 0;
    clear: both;
    overflow: hidden;
    visibility: hidden;
}

2、绝对定位+外边距

.wrap {
    position: relative;
    width: 80%;
    height: 400px;
    margin: 0 auto;
    border: 1px solid red;
}

.left {
    position: absolute;
    top: 0;
    left: 0;
    width: 200px;
    height: 300px;
    background: #ccc;
}

.right {
    height: 100%;
    margin-left: 200px;
    background: #ddd;
}

3、利用BFC特性：

.wrap {
    width: 80%;
    height: 400px;
    margin: 0 auto;
    border: 1px solid red;
}

.left {
    width: 200px;
    height: 300px;
    float: left;
    background: #ccc;
}

.right {
    height: 100%;
    overflow: hidden;
    background: #ddd;
}

在给第二个子元素设置了overflow:hidden ， 它就生成了一个BFC块 ；

BFC其中的一个布局规则就是不会和float box 发生重叠，于是就和第一个浮动了的子元素隔开了；

---

也可以利用flex进行两列等高布局，不过要考虑到其兼容问题；

1、display: table-cell 实现多列等高布局:

将容器设为display:table然他成为一个块级表格元素，子元素display:table-cell使子元素成为表格单元格;

.wrap {
    display: table;
    overflow: hidden;
}
.left {
    display: table-cell;
    width: 200px;
    background: #4caf50;
}
.right {
	display: table-cell;
    width: 800px;
    background: #99afe0;
}

2、padding + margin + overflow，实现多列等高效果，兼容性好

.wrap {
    position: relative;
    overflow: hidden;
}
.left {
    float: left;
    width: 200px;
    padding-bottom: 9999px;
    margin-bottom: -9999px;
    background: #4caf50;
    
    /* 可以做到左侧固定宽度，右侧宽度响应式效果
    position: absolute;
    */
}
.right {
    float: left;
    width: 800px;
    padding-bottom: 9999px;
    margin-bottom: -9999px;
    background: #99afe0;
    
    /* 
    width: 100%;
    margin-left: 200px;
    */
}