CSS水平居中

时间：2014-05-09 19:52:24 收藏：0 阅读：535

这里指的水平居中当然是说通过CSS来自动控制的，而不是说计算之后，设置一个位置来指定居中的。

一般情况下有三种实现方式：

在实现方式中，我们定义两个名词来方便后面的解说:out--包含需要被居中元素的那个容器，in--需要居中的元素。

1. text-align: center

设置out的text-align: center
保证in的display为inline

2. margin-left : auto; margin-right: auto

设置in的margin-left : auto; margin-right: auto
保证in的display为block

3. 负外边距方式

设置in的position:absolute
设置in的left:50%
设置in的margin-left: 负的in的宽度的一半（例如in的宽度是100px,那么设置这里为-50px）
设置out的position:absolute/relative
需要明确知道in的宽度

三种方式用起来都比较简单，但是都有自己的适用范围，上面给出的是达到居中目标而需要的条件，其中标明红色的地方即是条件，也是方法的局限所在。

前两种的原理都比较好理解，第三种的原理稍微讲一下，也很好理解：

实际上主要是两步，第一把in通过left：50%移动到out的中间，如果in只是一条线，那么到这里其实工作已经完成了。但是如果in有宽度的话，那么就会发现它的做边框正好位于out的中间位置。ok，

很显然的，第二步我们要把in再往左移动in宽度的一半，即可让in的中间位于out的中间，即in居于out的中间。

下面以in和out都是div来举例，给出代码，代码中包含全部三种方式也可以直接点击下面的demo地址 http://demo.zhengjiachao.com/css/hori-center.html

<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="../resource/js/jquery-1.7.2.js"></script>
<style type="text/css">
.out{
    height:200px;
    background-color: orange;
    margin : 10px;
}

.in{
    width:100px;
    height:100px;
    background-color: gray;
}
.out.type-1{
    text-align: center;
}
.in.type-1{
    display: inline;
}
.in.type-2{
    margin : 0 auto;
}
.out.type-3{
    position: relative;
}
.in.type-3{
    position: absolute;
    left: 50%;
    margin-left: -50px;
}

</style>
</head>

<body>
<div class="out type-1">
    <div class="in type-1">
        1 text-align: center
    </div>
</div>
<div class="out type-2">
    <div class="in type-2">
        2 margin: 0 auto;
    </div>
</div>
<div class="out type-3">
    <div class="in type-3">
        3 负外边距
    </div>
</div>
<script type="text/javascript">
</script>
</body>
</html>

CSS水平居中,布布扣,bubuko.com