CSS居中各种情况的解决情况

CSS居中的几种情况

• 这里参考How to center anything with css

1. 元素水平居中

• [ ] 1. 第一种最常见的情况就是在视图或者浏览器中元素的水平居中。

• 这里我们用一个简单的div的例子进行演示：

//html代码：
<div id="center"></div>

//css代码：
#center {
    height: 200px;
    width: 200px;
    background: #222;
    margin: 0 auto;
}

• 这里我们当然不能用绝对定位来实现居中，因为不能保证在不同的计算机上都可以实现居中。
• 这里必须记住的是：如果要采用这种margin为auto的方法，必须要明确声明元素的宽。而元素的高度并不是必要的。
• 这个方法不仅仅适用于div，也适用于其他的块级元素，例如下面这个例子：

//html代码：
<div id="center">
    <p>关于函数声明，它的重要特征就是函数声明提升，意思是在执行代码之前会先读取函数声明。
    </p>
</div>

//css代码：
#center {
    height: 200px;
    width: 200px;
    background: #222;
    margin: auto;
}
p{
    color: white;
    width: 60%;
    margin: auto;
}

• [ ] 2. 第二种方法就是使一个绝对定位的元素居中

• 上面的第一个例子是我们假定元素的定位是position: fixed，下面将来介绍使一个绝对定位的元素居中。
• 这里我们需要用到left属性，并且需要借用一个公式left = (parent width - element width)/2。

//html代码：
<div class="container">
    <div class="box"></div>
</div>

//css代码：
.container {
    width: 300px;
    height: 300px;
    background: #eee;
    position: relative;
    margin: 10px auto;
}

.box {
    width: 100px;
    height: 100px;
    background: #222;
    position: absolute;
    /*计算left的值： （300-100）/2；*/
    left: 100px;
}

• 这里还有另一种方法：

.container {
    width: 400px;
    height: 400px;
    background: #eee;
    position: absolute;
    left: 0;
    bottom: 0;
    top: 0;
    right: 0;
    margin: 0 auto;
}

• [ ] 3. 当父容器的宽度不固定时的居中问题

• 上面的情形只适用于父容器的宽度固定。但更多的情况是，父元素的宽度并不固定，这时我们将要采用另一种方法。

//html代码：
<div class="container">
    <div class="box"></div>
</div>

//css代码：
.container {
    width: 70%;
    height: 300px;
    background: #eee;
    position: relative;
    margin: 10px auto;
}

.box {
    width: 100px;
    height: 100px;
    background: #222;
    position: absolute;
    left: 50%;
    margin-left: -50px;
    /*transform: translateX(-50%)*/;
    //向左移动自身宽度的一半
}

• 这里还有另外一种情况，当所需要的居中的元素的宽度也不固定时，可以采用这种方式。

//html代码：
<div class="container">
    <div class="box"></div>
</div>

//css代码
.container {
    width: 70%;
    height: 300px;
    background: #eee;
    position: relative;
    margin: 10px auto;
}

.box {
    width: 70%;
    height: 100px;
    background: #222;
    position: absolute;
    left: 50%;
    margin-left: -35%;
    /*transform: translateX(-50%)*/;
}

2. 元素垂直居中

• [ ] 4. 同时实现垂直居中和水平居中

• 首先先来介绍文字的水平居中和垂直居中：

//html代码：
<div class="container">
    <h1>some headline</h1>
</div>

//css代码：
.container {
    width: 400px;
    height: 400px;
    background: #eee;
    margin: 50px auto;
}

h1 {
    text-align: center;
    /*简写*/
    /*font: 40px/400px Helvetica, sans-serif;*/
    font-size: 40px;
    line-height: 400px;
}

• 下面来介绍一个div在父容器中怎么垂直居中，当其高度固定时，可以使用下面这种方法。

//html代码：
<div class="container"></div>

//css代码：
.container {
    width: 400px;
    height: 400px;
    background: #eee;
    margin: 0 auto;
    position: relative;
    top: 50%;
    margin-top: -200px;
}
html, body {
    height: 100%;
}
//这里一定要设置body, html的高度。

• 若div高度不确定时，可用另外一种方法：

.container {
    width: 400px;
    height: 30%;
    background: #eee;
    margin: 0 auto;
    position: relative;
    top: 50%;
    transform: translateY(-50%); 
}
html, body {
    height: 100%;
}

• 还有一种方法实现水平和垂直都居中：

.container {
    width: 400px;
    height: 400px;
    background: #eee;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); 
}
html, body {
    height: 100%;
}

3. 背景图片居中

• 这里顺便说一句背景图片如何居中：

.container {
  height: 300px;
  width: 300px;
  margin: 150px auto;
  background: #eee url(http://lorempixum.com/100/100/nature/4)     no-repeat center;
  /*background-bottom有九种属性，上面的center即为background-position属性*/
}