CSS 实用片段

1、垂直对齐：垂直对齐容器中的元素.

verticalcenter{
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
}

2、垂直居中:
不知道父元素高度的情况

parentElement {
  position:relative;
}

childElement {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

若父容器下只有一个元素，且父元素设置了高度，则只需要使用相对定位即可

parentElement {
  height: xxx;
}

childElement {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

flex 布局

parentElement {
  display: flex; /*Flex布局*/
  display: -webkit-flex; /* Safari */
  align-items: center; /*指定垂直居中*/
}

line-height 设置了行间的距离（行高），将要居中的元素的 line-heigth 值设置为和其块级父元素的 height 值一样时，其内部内容会垂直居中。

element {
  height: 100px;
  line-height: 100px;
}

3、水平居中:
行级元素水平居中对齐:text-align:center;
块级元素水平居中对齐:margin: 0 auto
对于浮动的元素居中

• 宽度不固定的浮动元素

<div class="outerbox">
  <div class="innerbox">我是浮动的</div>
 </div>

.outerbox {
  float: left;
  position: relative;
  left: 50%;
}
.innerbox {
  float: left;
  position: relative;
  right: 50%;
}

。。。未完待续