垂直居中

CSS+DIV控制页面中元素垂直居中代码，实现全局和区域CSS垂直居中示范代码：

<style type=”text/css” media=screen>body{text-align: center;}#a{width: 200px;height: 400px;background: #000;}#b{margin-top: expression((a.clientHeight-50)/2);width: 50px;height: 50px;background: #FFF;}#c{position: absolute;left: expression((body.clientWidth-50)/2);top: expression((body.clientHeight-50)/2);width: 50px;height: 50px;background: #F00;}</style><div id=”a”><div id=”b”></div></div><div id=”c”></div>

另一CSS居中方法:

<div style=”background:blue;position:absolute;left:expression((body.clientWidth-50)/2);top:expression((body.clientHeight-50)/2);width:50;height:50″></div>

---

<div id="box">
    <div id="child">我是测试DIV</div>
</div>

#box {
    width: 300px;
    height: 300px;
    background: #ddd;
    position: relative;
}
#child {
    width: 150px;
    height: 100px;
    background: orange;
    position: absolute;
    top: 50%;
    margin: -50px 0 0 0;
    line-height: 100px;
}

---

<div id="child">
    我是一串很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的文本
</div>

css代码：

#box {
    width: 300px;
    height: 300px;
    background: #ddd;
    position: relative;
}
#child {
    background: #93BC49;
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
}

---

绝对定位结合margin: auto

html代码：

<div id="box">
    <div id="child">呆呆今天退役了(。﹏。)</div>
</div>

css代码：

#box {
    width: 300px;
    height: 300px;
    background: #ddd;
    position: relative;
}
#child {
    width: 200px;
    height: 100px;
    background: #A1CCFE;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    line-height: 100px;
}

---

设置第三方基准

html代码：

<div id="box">
    <div id="base"></div>
    <div id="child">今天写了第一篇博客，希望可以坚持写下去！</div>
</div>

css代码：

#box {
    width: 300px;
    height: 300px;
    background: #ddd;
}
#base {
    height: 50%;
    background: #AF9BD3;
}
#child {
    height: 100px;
    background: rgba(131, 224, 245, 0.6);
    line-height: 50px;
    margin-top: -50px;
}

---

使用 line-height 对单行文本进行垂直居中

html代码：

<div id="box">
    我是一段测试文本
</div>

css代码：

#box{
    width: 300px;
    height: 300px;
    background: #ddd;
    line-height: 300px;
}