css 垂直居中的方法

标签：css-常用技巧

1. table-cell 式
   将 center 元素的父容器设置为 display:table, center 元素设置为的 display:table-cell; vertical-align:middle。

      

        
fighting
        
生活是苦逼的，梦想是牛逼的；再牛逼的梦想，也抵不住你傻逼似的坚持。
      

.container {
      display: table-cell;
      vertical-align: middle;
      width: 600px;
      height: 300px;
      border: 2px solid red;
    }

    .center {
      display: block;
      width: 350px;
      margin-left: auto;
      margin-right: auto;
      border: 1px dotted blue;
    }

2. 绝对定位结合 translateY(-50%)
   使用这种方法的情况下，如果需要垂直居中的绝对定位子元素不设置宽度的话，默认宽度为相对定位祖辈元素宽度的 50%

/*垂直居中*/
.parent { position: relative; }
.child {
      position: absolute;
      top : 50%;
      transform: translateY(-50%); // translate 中的%单位是相对自身的
}
/*水平垂直居中*/
.parent { position: relative; }
.child {
      position: absolute;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
}

3. 绝对定位结合 margin: auto

.parent {
      position: relative;
}
.absolute-center {
      width: 400px; height: 400px;
      margin: auto;
      position: absolute;
      top: 0; left: 0; bottom: 0; right: 0;
}
// 上面代码的 width: 400px; height: 400px; 仅是示例，但是需要设置居中元素的尺寸或者说需要的是图片这种自身包含尺寸的元素。

4. 弹性盒布局式（下面这个案例是水平垂直居中）；（ie11开始支持弹性布局）

    

      
利用弹性盒布局进行垂直居中
      ![](hactcm-sightseeing/1.jpg)
      
河中医六六六的图书馆
    
    
第二个块元素

.container {
        width: 70%; height: 500px;
        border: 1px solid rgb(59, 119, 140);
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
            flex-direction: column;
        align-items: center;
        justify-content: center;
}
.content {width: 30%;height: 50px;background-color: #666;}
.h1, .p {text-align: center;margin-top: 0;}
.img {width: 300px; height: auto; display: block; margin: auto;}  

知识扩展：大小不固定图片的垂直居中 http://www.zhangxinxu.com/study/200908/img-text-vertical-align.html#zhangxinxu