@[TOC]自动根据文章标题生成目录
css文本设置
常用的应用文本的css样式：
color 设置文字的颜色，如： color:red;
font-size 设置文字的大小，如：font-size:12px;
font-family 设置文字的字体，如：font-family:‘微软雅黑’;
font-style 设置字体是否倾斜，如：font-style:‘normal’; 设置不倾斜，font-style:‘italic’;设置文字倾斜
font-weight 设置文字是否加粗，如：font-weight:bold; 设置加粗 font-weight:normal 设置不加粗
line-height 设置文字的行高，设置行高相当于在每行文字的上下同时加间距， 如：line-height:24px; 行高示例图片
font 同时设置文字的几个属性，写的顺序有兼容问题，建议按照如下顺序写： font：是否加粗 字号/行高 字体；如： font:normal 12px/36px ‘微软雅黑’;
text-decoration 设置文字的下划线，如：text-decoration:none; 将文字下划线去掉
text-indent 设置文字首行缩进，如：text-indent:24px; 设置文字首行缩进24px 行高示例图片
text-align 设置文字水平对齐方式，如text-align:center 设置文字水平居中
常用的使文本居中的办法
1. 文本居中
首先编写一个简单的html代码，设置一个类名为parentDiv的div对象。html代码如下：
1 <div class="parentDiv">
2 这里随意填写~...
3 </div>
1.1 实现文字水平居中（使用text-align）
对div.parentDiv设置text-align: center;来实现。
CSS代码如下：
1 [css] 2 3 .parentDiv {
4 width:200px;
5 height:100px;
6 border: 1px solid #ececec;
7 text-align:center; /*水平居中*/
8 }
有些时候，你会发现即使使用了text-align: center;属性，但是仍然没有起到居中的作用。原因就在于div标签本身没有定义自己居中的属性，而且这样做对布局是非常不科学的方法。正确的设置方法其实很简单就是给.parentDiv添加以下属性：margin:0px auto; 即可。具体可看2.1。
注：在父级元素定义text-align: center;属性的意思就是在父级元素内的内容居中；对于IE浏览器这样设置就没问题了，但在Mozilla浏览器中却不行。解决办法就是：在子元素定义设定时，再加上margin-left: auto;及margin-right: auto;就没问题了。需要说明的是如果想用这个方法使整个页面要居中，建议不要套在一个div里，可以依次拆出多个div，只要在每个拆出的div里定义margin-left: auto;及margin-right: auto;就行。
1.2 单行文本垂直居中（使用line-height）
文字在层中垂直居中使用vertical-align属性是做不到的，所以这里有个比较巧的方法就是：设置height的高度与line-height的高度相同。CSS代码如下：
1 [css] 2 3 .parentDiv {
4 width:200px;
5 height:100px;
6 border: 1px solid #ececec;
7 text-align:center; /* 水平居中 */
8 line-height: 100px; /* line-height = height */
9 }
1.3 文本垂直居中（使用vertical-align）
可以使用vertical-align实现垂直居中，不过vertical-align仅适用于内联元素和table-cell元素，因此之前需要转化。
1 [css]2 3 .outerBox{4 width:200px;5 height:100px;6 border: 1px solid #ececec;7 text-align:center; /* 水平居中 */8 display:table-cell; /*转化成table-cell元素*/9 vertical-align:middle; /*垂直居中对齐，vertical-align适用于内联及table-cell元素*/
10 }
1.4 图片垂直居中（使用background-position）
这里指的是背景方法，在div.parentDiv对象中使用background-position属性。CSS代码如下：
1 [css] 2 3 .parentDiv {
4 background: url(xxx.jpg) #ffffff no-repeat center;
5 }
注：关键就在于最后的center，这个参数定义图片的位置。当然，background-position属性还可以写成“top left"或者"bottom right"等，也可以直接写数值。
2. div居中
首先编写一个简单的html代码，设置一个父div类名为parentDiv，再设置一个子div类名为childDiv。html代码如下：
1 <div class="parentDiv">
2 <div class="childDiv"></div>
3 </div>
实现parentDiv和childDiv父子div的盒子宽高背景色和边框大小。CSS代码如下：
1 [css]2 3 * {4 -webkit-box-sizing: border-box; /*Safari*/5 -moz-box-sizing: border-box; /*Firefox*/6 box-sizing: border-box;7 }8 9 .parentDiv {
10 width:400px;
11 height: 100px;
12 background-color: #00ff00;
13 margin: 20px;
14 }
15 16 .childDiv {
17 width: 200px;
18 height:50px;
19 background-color: #ff0000;
20 }
2.1 水平居中（使用margin:auto）
当div.childDiv对象拥有固定宽度时，设置水平方向margin为auto，可以实现水平居中。CSS代码如下：
1 [css]
2
3 /*margin:auto实现水平居中，需要居中的div必须拥有固定的宽度*/
4 .parentDiv .childDiv {
5 margin: 0 auto;
6 }
2.2 实现水平居中（使用text-align:center）
如果给子盒子div.childDiv设置display: inline-block不影响整体布局时，可以将子盒子转化为inline-block，对父盒子设置text-align:center实现居中对齐。CSS代码如下：
1 [css]2 3 /*4 text-align: center;实现水平居中5 需要子盒子设置为display: inline-block;6 */7 .parentDiv {8 text-align: center;9 }
10 11 .parentDiv childDiv {
12 display: inline-block;
13 }
2.3 table-cell元素居中
将父盒子设置为table-cell元素，可以使用text-align: center;和vertical-align: middle;实现水平、垂直居中。比较好的解决方案是利用三层结构模拟父子结构。html代码如下：
1 <div class="parentDiv tableCell">
2 <div class="id1">
3 <div class="childDiv">tableCell</div>
4 </div>
5 </div>
CSS代码如下：
1 [css]2 3 /*4 table-cell实现居中5 将父盒子设置为table-cell元素，设置6 text-align: center; vertical-align: middle;7 子盒子设置为inline-block元素8 */9 .tableCell {
10 display: table;
11 }
12 13 .tableCell .id1 {
14 display: table-cell;
15 text-align: center;
16 vertical-align: middle;
17 }
18 19 .tableCell .childDiv {
20 display: inline-block;
21 }
2.4 绝对定位居中（利用margin实现偏移）
将parentDiv对象设置为定位元素（利用position: relative;属性），将childDiv对象设置为绝对定位，left和top均为50%，这时子盒子的左上角居中对齐，利用margin实现偏移。CSS代码如下：
1 [css]2 3 /*绝对定位实现居中*/4 .parentDiv {5 position: relative;6 }7 8 .parentDiv .childDiv {9 position: absolute;
10 left:50%;
11 top:50%;
12 margin-left:-100px; /*利用margin实现偏移,设置为宽度和高度的一半的负值*/
13 margin-top:-25px;
14 }
2.5 绝对定位居中（利用transform实现偏移）
绝对定位方式与2.4类似，只不过利用transform中的translate实现偏移。CSS代码如下：
1 [css]2 3 /*绝对定位实现居中,transform偏移*/4 .parentDiv {5 position: relative;6 }7 8 .parentDiv .childDiv {9 position: absolute;
10 left:50%;
11 top:50%;
12 -webkit-transform: translate(-50%, -50%);/*以下实现浏览器兼容*/
13 -moz-transform: translate(-50%, -50%);
14 -ms-transform: translate(-50%, -50%);
15 -o-transform:translate(-50%, -50%) ;
16 transform:translate(-50%, -50%);
17 }
2.6 绝对定位居中（利用margin:auto实现偏移）
同样对子盒子实现绝对定位，这里使用top、right、bottom、left均为0，margin为auto实现偏移。CSS代码如下：
1 [css]2 3 /*绝对定位实现居中,margin:auto实现偏移*/4 .parentDiv {5 position: relative;6 }7 8 .parentDiv .childDiv {9 position: absolute;
10 left:0; /*top、right、bottom、left均为0*/
11 top:0;
12 right: 0;
13 bottom: 0;
14 margin: auto;
15 }
2.7 Flexbox居中
使用弹性盒模型(flexbox)实现居中。CSS代码：
1 [css]2 3 /*flexbox实现居中*/4 .flexBox {5 display: -webkit-box; /*Safari*/6 display: -moz-box; /*Firefox*/7 display: -ms-flexbox; /*IE*/8 display: -webkit-flex; /*Chrome*/9 display: flex;
10 -webkit-box-align: center;
11 -moz-box-align: center;
12 -ms-flex-align: center;
13 -webkit-align-items: center;
14 align-items: center;
15 -webkit-box-pack: center;
16 -moz-box-pack: center;
17 -ms-flex-pack: center;
18 -webkit-justify-content: center;
19 justify-content: center;
20 }