垂直居中布局的几种css实现方法

在开发中经常会需要实现一些居中布局问题，今天来总结一下垂直居中布局的css实现方法。

# 任意高度的垂直居中布局

# 1.父元素tabel-cell +vertical-align

此方法的优点：兼容性好，兼容ie8+。

<style type="text/css">
    .parent{
        <!-- 样式内容省略 -->
        display: tabel-cell;
        vertical-align:middle;
    }
    .child{
        <!-- 样式内容省略 -->
    }
</style>
<div class="parent">
    <div class="child">DEMO</div>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13

# 2. absolute + transform

优点：不会干扰其他元素
缺点：兼容性不好

<style>
    .parent{
        <!-- 样式内容省略 -->
        position:relative;
    }
    .child{
        <!-- 样式内容省略 -->
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        
    }
</style>
<div class="parent">
    <div class="child">DEMO</div>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# 3.flex+align-items

优点：和第一种方法一样只需要对父元素设置缺点：兼容性不好

    <style type="text/css">
        .parent{
            <!-- 样式内容省略 -->
            display: flex;
            align-items:center;
        }
        .child{
            <!-- 样式内容省略 -->
        }
    </style>
    <div class="parent">
        <div class="child">DEMO</div>
    </div>

1
2
3
4
5
6
7
8
9
10
11
12
13

# 固定高度的垂直居中布局

这个用以上的方法也可以，不过我比较喜欢用负margin实现

    <style>
        .parent{
            <!-- 样式内容省略 -->
            position:relative;
        }
        .child{
            <!-- 部分样式内容省略 -->
            height:200px;
            position: absolute;
            top: 50%;
            margin-top:-100px;
        }
    </style>
    <div class="parent">
        <div class="child">DEMO</div>
    </div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

总结了几种方法，各有利弊，还是那句话：具体情况具体分析~

ps:增加了运行代码的功能更好的代码功能还在研究当中。