未知宽高div垂直水平居中的几种方法

工作中我们经常遇到需要把一个标签，在一个容器中垂直水平居中，但是我们又可能不确定这个标签的宽高，或者是不固定宽高，那怎么做呢？

网上很多都是标签内放文字，几行几行来做，针对不同行数做不同方法。今天我就说说一个标签整体来垂直水平居中吧，面试也会经常遇到这种问题。

首先说说已知宽高的方法，用处也非常多，比如布局的时候，要绝对居中，或者是做banner图的时候，也需要用到，不可能做一个放大缩小后整体在左，或者是在右吧，还有就是网站经常有那种一排标签，中间有一张图片，而且每张图片大小宽高都不同，所有你不可能每一张单独写样式吧，所以用处非常多。

先说说：已知宽高的我就说一种吧。利用定位，绝对居中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>李鹏-前端开发</title>
</head>
<style>
.box{
    width: 800px;
    height:800px;
    border:1px solid #000;
    position:relative;
}
.box .cen{
    width: 200px;
    height: 200px;
    background: #0ff;
    position:absolute;
    left:50%;
    top:50%;
    margin-left: -100px;
    margin-top:-100px;
}
</style>
<body>
    <div class="box">
        <div class="cen"></div>
    </div>
</body>
</html>

下面我就先说说未知宽高图片的垂直水平居中方法吧：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>李鹏-前端开发</title>
</head>
<style>
.box{
    width: 800px;
    height:800px;
    border:1px solid #000;
    display:table-cell;
    text-align:center;
    vertical-align: middle;
}
.box img{
    vertical-align: middle;
}
</style>
<body>
    <div class="box">
        ![](images/1.jpg)
    </div>
</body>
</html>

那么，下面进入正题，说说未知宽高的方法吧。

方法一：利用定位+margin：auto

优点：这个方法目前我是绝对非常棒。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>李鹏-前端开发</title>
    <style>
        .box{
            width: 800px;
            height: 800px;
            border:1px solid #000;
            position:relative;
        }
        .cen{
            width: 200px;
            height: 200px;
            background: #0ff;
            position:absolute;
            left:0;
            top:0;
            bottom:0;
            right:0;
            margin:auto;
        }
    </style>  
</head>
<body>
    <div class="box">
        <div class="cen"></div>
    </div>
</body>
</html>

方法二：利用display:table-cell

缺点：IE6 7 是不支持display:inline-block

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>李鹏-前端开发</title>
    <style>
        .box{
            width: 800px;
            height: 800px;
            border:1px solid #000;
            display:table-cell;
            vertical-align: middle;
            text-align:center;
        }
        .cen{
            width: 200px;
            height: 200px;
            background: #0ff;
            vertical-align: middle;
            display:inline-block;
        }
    </style>  
</head>
<body>
    <div class="box">
        <div class="cen"></div>
    </div>
</body>
</html>

方法三：使用css3 transform:translate(-50%; -50%)；

优点：高大上,可以在webkit内核的浏览器中使用
缺点：不支持IE9以下不支持transform属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>李鹏-前端开发</title>
</head>
<style>
.box{
    position: relative;
    height:800px;
    width: 800px;
    border:1px solid #000;
}
.box .cen{
    width: 200px;
    height: 200px;
    background: #0ff;
    position: absolute;
    top: 50%;
    left: 50%;
    color: #fff;
    transform: translate(-50%, -50%);
}
</style>
<body>
<div class="box">
        <div class="cen"></div>
    </div>
</body>
</html>

方法四：使用css3 flex布局

优点：简单快捷
缺点：兼容不好吧

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>李鹏-前端开发</title>
</head>
<style>
.parent4{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 800px;
    height:800px;
    border:1px solid #000;
}
.parent4 .child{
    color:#fff;
    width: 200px;
    height: 200px;
    background: #0ff;
}
</style>
<body>
    <div class="parent4">
        <div class="child"></div>
    </div>
</body>
</html>

好了，一共就以上几种方法，看网上有的说插入一个空标签之类的，我觉得不怎么好，毕竟需要插入一个空标签，还是不如我这几种方法，大家觉得哪种喜欢就用哪种吧。我是比较推荐第一种定位布局的那个。
以上，结束。