CSS实现元素垂直居中

Posted on | In
CSS实现元素居中的几种方法。

水平居中方案

  1. 行内元素 设置 text-align:center
  2. 定宽块状元素 设置 左右 margin 值为 auto
  3. 不定宽块状元素
    a:在元素外加入 table 标签（完整的，包括 table、tbody、tr、td），该元素写在 td 内，然后设置 margin 的值为 auto
    b:给该元素设置 displa:inine 方法
    c:父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left:50%

垂直居中设置

  1. 父元素高度确定的单行文本
    设置 height = line-height
  2. 父元素高度确定的多行文本
    a:插入 table （插入方法和水平居中一样），然后设置 vertical-align:middle
    b:先设置 display:table-cell 再设置 vertical-align:middle

#几种居中方案

1，使用position:absolute

设置left、top、margin-left、margin-top的属性

.one {
    position: absolute;
    width: 200px;
    height: 200px;
    top: 50%;
    left: 50%;
    margin-top: -100px;
    margin-left: -100px;
    background: red;
}

基本浏览器都能够兼容，不足之处:需要固定宽高。

##2，使用position:fixed

.two {
    position: fixed;
    width: 180px;
    height: 180px;
    top: 50%;
    left: 50%;
    margin-top: -90px;
    margin-left: -90px;
    background: orange;
}

position:fixed,IE是不支持这个属性的

3，利用position:fixed属性，margin:auto。

.three {
    position: fixed;
    width: 160px;
    height: 160px;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    background: pink;
}

4，利用position:absolute属性，设置top/bottom/right/left

.four {
    position: absolute;
    width: 140px;
    height: 140px;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    background: black;
}

5，利用display:table-cell属性使内容垂直居中

.five {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    width: 120px;
    height: 120px;
    background: purple;
}

6，最简单的一种使行内元素居中的方法，使用line-height属性

.six {
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
    background: gray;
}

这种方法也很实用，比如使文字垂直居中对齐.

7，使用css3的display:-webkit-box属性，再设置-webkit-box-pack:center/-webkit-box-align:center

.seven {
    width: 90px;
    height: 90px;
    display: -webkit-box;
    -webkit-box-pack: center;
    -webkit-box-align: center;
    background: yellow;
    color: black;
}

8，使用css3的新属性transform:translate(x,y)属性

.eight {
    position: absolute;
    width: 80px;
    height: 80px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    background: green;
}

这个方法可以不需要设定固定的宽高，在移动端用的会比较多，在移动端css3兼容的比较好

9、最高大上的一种，使用:before元素

.nine {
    position: fixed;
    display: block;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    text-align: center;
    background: rgba(0, 0, 0, .5);
}

.nine:before {
    content: '';
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}

.nine .content {
    display: inline-block;
    vertical-align: middle;
    width: 60px;
    height: 60px;
    line-height: 60px;
    color: red;
    background: yellow;
}