div内容垂直居中的方法
    随着div的普及使用，居中的特技也在使用越来越多。在前端开发中，实现div内容垂直居中有以下几种方法：
    一、使用CSS table布局
    CSS table布局是使用table元素的display属性来模拟table布局，利用table-cell来居中特定元素。使用display：table;和display：table-cell;属性，我们可以让内容垂直居中，具体实现如下：
    html：
    ```
    <div class=wrap
    <div class=inner-boxcss设置文字垂直居中
    content
    </div>
    </div>
    ```
    css：
    ```
    .wrap{
    display: table;
    width: 100%;
    height: 100px;
    }
    .inner-box{
    display: table-cell;
    vertical-align: middle;
    }
    ```
    这种方式的优点是兼容性比较好，能在IE 8及以上的浏览器使用；但是缺点也很明显，就是有点麻烦，要配合HTML元素以及CSS样式才能实现内容垂直居中，无形中多做了更多的工作。
    二、使用flex布局
    flex是最近几年出现的一种布局，它能很方便的实现div内容的垂直居中，具体实现如下：
    html：
    ```
    <div class=flex-wrap
    <div class=flex-inner
    content
    </div>
    </div>
    ```
    css：
    ```
    .flex-wrap {
    display: flex;
    align-items: center;
    height: 100px;
    }
    ```
    使用flex布局居中的最大优点在于实现更加方便，只需要两行CSS代码即可实现div内容的垂直居中，兼容性也不错，可以在IE 10以及以上的浏览器使用。
    三、使用CSS3 transform：translateX属性
    CSS3 transform提供了许多属性，其中有一个叫translateX,通过translateX可以实现水平移动，进而实现内容的垂直居中，具体实现如下：
    html：
    ```
    <div class=translate-wrap
    <div class=translate-inner
    content
    </div>
    </div>
    ```
    css：
    ```
    .translate-wrap {
    position: relative;
    width: 100%;
    height: 100px;
    }
    .translate-inner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%);
    }
    ```
    通过设置父元素与子元素的定位，进而让子元素的水平位置居中，并且再设置子元素的translateX(-50%)来实现内容的垂直居中。这种方式的优点是让内容垂直居中只需要使用一行CSS代码，非常方便；缺点在于兼容性不太好，只能在IE 9以及以上的浏览器使用。
    以上就是实现div内容垂直居中的几种不同方法介绍，从使用方便、性能以及兼容性上来看，使用flex布局是最佳选择，无论是PC端还是移动端都可以使用；而CSS 3 transform：translateX则只能用在移动端，在PC端不能使用，并且兼容性也非常差；CSS table则是一种比较麻烦的方法，需要配合HTML元素以及CSS样式来实现内容的垂直居中，但是可以实现兼容性最好的效果。
    总而言之，实现div内容垂直居中有多种方法，需要实际应用情况来决定选择哪种方法，只要选择最接近的方法，就可以实现完美的div内容垂直居中。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。