如何让一个元素水平垂直都居中了

在每次找工作，面试的时候基本都会遇到这样的问题：如果让一个div水平垂直居中？

1.其实对于知道长高的元素来说，水平垂直居中对齐是很简单的，可以用绝对定位来实现，把left,top各设为50%，可以把元素的顶点放到正中间，再用外边距可以为负，给上边距外边距再各偏移负长高的一半，代码具体如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>元素水平垂直居中</title>
    <style type="text/css">
        *{padding:0;margin:0;}
        .content{margin:0 auto;width:800px;height:500px;border:1px solid #000;position:relative;}
        .contentp{width:400px;height:200px;background:green;position:absolute;left:50%;top:50%;margin:-100px 0 0 -200px}
        
    </style>
</head>
<body>
    <div class="content">
        <p class="contentp"></p>
    </div>
</body>
</html>

效果如下：

2.另一种水平垂直居中的方法是用margin:auto来实现（特别适合像那咱图片自身就包含尺寸的，可以不设长宽也能水平垂直居中）,代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>元素水平垂直居中</title>
    <style type="text/css">
        *{padding:0;margin:0;}
        .content{margin:0 auto;width:800px;height:500px;border:1px solid #000;position:relative;}
        .contentp{width:400px;height:200px;background:green;color:red;position:absolute;top:0;left:0;right:0;bottom:0;margin:auto;}
    </style>
</head>
<body>
    <div class="content">
        <p class="contentp">我是居中的</p>
    </div>
</body>
</html>

效果图如下：

 

3.还有另一种水平垂直居中的方法就是用表格单元格Table-Cell来实现,ie6-7是不支持table-cell,只能靠浏览器hack来解决，这样可以兼容IE6+，最大的缺点就是需要大量额外的标记，需要三层元素让最内层的元素居中。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>元素水平垂直居中</title>
    <style type="text/css">
        *{padding:0;margin:0;}
        .content{margin:0 auto;display:table;width:800px;height:400px;*position:relative;border:1px solid #000;}
        .table-cell{display:table-cell;vertical-align:middle;margin:0 auto;*position:absolute;*top:50%;*left:50%;width:400px;}
        .contentp{width:50%;margin:0 auto;background:red;*position:relative;*top:-50%;*left:-50%;}
    </style>
</head>
<body>
    <div class="content">
        <div class="table-cell">
            <p class="contentp">我是居中的<br>我是居中的<br>我是居中的<br>我是居中的<br>我是居中的<br>我是居中的<br>我是居中的<br>我是居中的<br>我是居中的</p>
        </div>
    </div>
</body>
</html>

效果图如下：

4.在css3胜行的今天，css3新增的样式transform实现元素水平垂直居中，并且无需设置元素的高度(其实宽度也是可以不设置的)，很适合高度自适应的水平垂直居中，但是兼容性是个问题，IE9+以及其他现代浏览器才支持。中国盛行的IE8浏览器被忽略是有些不适宜的（手机web开发可忽略）具体代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>元素水平垂直居中</title>
    <style type="text/css">
        *{padding:0;margin:0;}
        .content{margin:0 auto;width:800px;height:500px;border:1px solid #000;position:relative;}
        .contentp1{width:400px;overflow:hidden;background:green;color:red;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}
    </style>
</head>
<body>
    <div class="content">
        <p class="contentp1">我是居中的哦<br>我是剧中的<br>其是居中的<br>我是居中的<br>我是居中的</p>
    </div>
</body>
</html>

效果图如下：

5.对于不定长高的元素想实现水平垂直居中得用到display:inline-block特性来实现，兼容ie8+

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>元素水平垂直居中</title>
    <style type="text/css">
        *{padding:0;margin:0;}
        .content{margin:0 auto;width:800px;border:1px solid #000;height:500px;text-align:center;}
        .content:before{content:"";height:100%;display:inline-block;vertical-align:middle;visibility:hidden}
        .contentp{width:50%;background:red;display:inline-block;vertical-align:middle;}
    </style>
</head>
<body>
    <div class="content">
        <p class="contentp">我是居中的<br>我是居中的<br>我是居中的<br>我是居中的<br>我是居中的<br>我是居中的<br>我是居中的<br>我是居中的<br>我是居中的</p>
    </div>
</body>
</html>

效果如下：

以下水平居中对齐方法最可靠的是第一种跟第二种，没有什么兼容问题，后面的几种都有相应的低版本IE不兼容的问题，第三种可以用浏览器hack来解决，可以选择性使用.

posted @ 2015-01-27 16:36  ！win ！  阅读(496)  评论(0)  编辑  收藏  举报