水平居中和垂直居中的实现，特整理纪录一下。

子元素是block元素

1
2
3
<div class="father" style="width:500px; height:200px; background-color:black;">
  <div class="child" style="width:100px; height:100px; background-color:red"></div>
</div>

1.水平居中

先看下效果：

每一个CSS代码块是一种解决方案（chrome下均亲测可用，实际运用请注意浏览器兼容):

1
2
3
.child {
  margin: 0 auto;	/* 该方式比较主流，简单易懂 */
}
1
2
.father { text-align: center;}
.child { display: inline-block;}  /* 这里其实就是把子元素当成inline元素对待，就跟span一样 */
1
2
3
4
5
.child {
  position: relative;
  left: 50%;
  transform: translate(-50%,0);    /* 得注意浏览器兼容问题，如safari8需要加-webkit前缀才行 */
}
1
2
3
4
.father {
  display: flex;	/* css3新出的一种布局方式，以flex布局展现。同样也需要注意浏览器兼容 */
  justify-content: center;	  /* 可参考这篇文章 [http://www.jianshu.com/p/7c4eca814055] */
}

2.垂直居中

效果如下：

1
2
3
4
5
6
.child {
  position: relative;
  top: 50%;		/* 先定位到离自身原来顶部50%处位置 */
  transform: translate(0,-50%);		/* 再自身上移其一半高度的距离 */
}
/* === 其实更稳妥的方法是先父元素设成relative，子元素设成absolute去处理。 === */
1
2
3
4
5
.father { 
  display: flex;
  flex-direction: column;	/* 决定主轴的方向（即项目的排列方向）*/
  justify-content: center; 	/* 定义了项目在主轴上的对齐方式。主轴可能是水平的也可能是垂直的*/
}

3.水平垂直居中

效果如下：

其实参考上面的水平居中和垂直居中的做法，就可以推出水平垂直居中的方法了吧

1
2
3
4
5
6
7
8
9
.father {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
1
2
3
4
5
.father {
  display: flex;
  justify-content: center;
  align-items: center;  /* 定义项目在交叉轴上如何对齐, center：交叉轴的中点对齐*/
}
1
2
3
4
5
6
.father {
  display: flex;	/* 让div容器自由自在成为一种flex布局*/
}
.child {
  margin: auto;	/* 设为Flex布局以后，子元素的float、clear和vertical-align属性将失效, 但是margin依然有效！ */
}
1
2
3
4
5
6
7
8
9
10
11
.father {
  position: relative;
}
.child {
  position: absolute;
  top: 0;
  left: 0;	/* 想要右对齐就注释这句*/
  right: 0;
  bottom: 0;
  margin: auto;
}

子元素是inline元素

1
2
3
<div class="father" style="width:500px; height:200px; background-color:black;">
  <span class="child" style="color:white;">我是行内元素</span>
</div>

这里我就直接上水平垂直居中了：

1
2
3
4
5
6
7
8
9
10
11
.father {
  position: relative;
}
.child {
  display: inline-block;	/* 其实这里主要的思路就是让子元素以block元素的形式去显示，即使用inline-block*/
  width: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%)
}
1
2
3
4
5
6
.father {
  display: flex;   /* flex布局还是可以生效 */
}
.child {
  margin: auto;
}
1
2
3
4
.father {
  text-align: center;
  line-height: 200px;   /*  让行高等于父div的高度可以让子元素自动垂直居中,前提是得知道父元素的高度 */
}
1
2
3
4
5
6
7
8
.father {
  display: table;	/* 让div以表格形式展现 */
  text-align: center;
}
.child {
  display: table-cell;   /* 让span以表格单元形式展现 */
  vertical-align: middle; 
}

如果今后发现更好的方法，还会上来更新，未完待续..