文本，子div垂直居中

在样式布局中，通过CSS实现元素的水平居中，对于文本，对其父级元素设置text-align:center；对于div等块级元素，设置其left和right的margin值为auto；要实现文本和子div的垂直居中，可以通过以下方法：

一.实现文本垂直居中（单行/多行）

1.父级元素高度不设置，通过设置padding属性实现

• HTML代码：

<div id="center">设置文本垂直居中</div>

• CSS代码：

#center{width:600px;padding:120px;border:1px solid #464646;}

通过padding撑开高度，从而实现居中。

2.通过设置line-height

• HTML代码：

<div id="center">设置文本垂直居中</div>

• CSS代码：

#center{width:200px;height:400px;line-height:400px;border:1px solid #464646;}

设置line-height，实质上设置了行框，实现文本在行框中的居中，从而实现在div中的居中。

3.父级元素高度固定，通过设置vertical-align:middle

• HTML代码：

<div id="outer">    <div id="middle">设置文本垂直居中</div></div>

• CSS代码：

#outer{width:600px;height:200px;magin:50px auto;border:1px solid red;display:table;}#middle{display:table-cell;vertical-align:middle;text-align:center;}

以上三种方法可用于多行文本，单行文本的垂直居中。

二.实现子div垂直居中

1.根据子div具体大小设置偏移

• HTML代码：

<div id="outer">    <div id="middle">实现子div垂直居中</div></div>

• CSS代码：

#outer{background-color:#7f7f7f;width:300px;height:200px;        position:relative;}#middle{background-color:#5d5d5d;width:100px;height:100px;        margin:auto;position:absolute;left:50%;top:50%;        margin-left:-50px;margin-top:-50px;}

前提是在高度确定的情况下

2.根据absolute设置居中

• HTML代码：

<div id="outer">    <div id="middle">实现div垂直居中</div></div>

• CSS代码：

#outer{background-color:#e2e2e2;width:300px;height:200px;        position:relative;}#middle{background-color:#A0A0A0;width:100px;height:200px;        argin:auto;position:absolute;top:0;left:0;right:0;        bottom:0;}

3.根据vertical-align来设置

• HTML代码：

<div id="outer">    <div id="middle">实现div垂直居中</div></div>

• CSS代码：

#outer{background-color:#CDCDCD;       width: 300px;       height:200px;       display: table-cell;       vertical-align: middle;}#middle{background-color:#868686;        width: 100px;        height: 100px;        margin: 0 auto;}

4.根据display：flex实现居中

• HTML代码：

<div id="outer"><div id="middle">实现div垂直居中</div></div>

• CSS代码：

#outer{background-color:#CBCBCB;      width: 300px;      height: 200px;      display: flex;      justify-content: center;      align-items:center;}#middle{background-color:#898989;        width: 100px;        height: 100px;}