理解CSS居中
我想很多在前端学习或者开发过程中，肯定会遇到如何让你的元素居中的问题，网上google肯定会有很多的解决方法。今天我就个人的项目与学习经验谈谈个人理解css如何让元素居中。
要理解css的居中，首先必须理解css的元素分类以及css的盒模型(box model)。
a. 元素分类。
在css中把元素分为块级元素、内联元素以及内联块级元素。
块级元素最明显的特征就是: { display: block; } 。块级元素独占一行，默认情况元素的width默认为100%，但可以修改元素的height, width等样式；例如html中的<div>, <p>, <ul>, <li>, <hx>, <form>等。
内联元素最明显的特征是 { display: inline; } 。也叫行内元素，可以与其他行内元素共享一行，但是其height, width, margin-top, margin-bottom均不可设置。例如html中的<span>, <a>, < label>, <input>等。
内联块级元素，也就是行内块级元素 { display: inline-block; } 。顾名思义，内联块级元素既有块级元素的特征，也有内联元素的特征。也就是inline-block可以与其他元素共享一行，也可以设置height, width等样式。
b. 盒模型(box model)。
在css中，所有的元素都有盒模型，打开chrome审查任何一个网页的元素都会看到一个盒模型。
图1. css盒模型
正如图1所示，一个盒模型有margin, border, padding以及盒子本身的尺寸(height, width)，从字面量上通俗地讲就是（多个）盒子的间距、盒子的边框、盒子内的填充、以及盒子的宽、高。我们可以通过css修改这些样式，例如：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 div{ 8 width: 300px; 9 } 10 div.box-model{ 11 margin: 10px; 12 padding: 10px; 13 border: solid 2px; 14 width: 100px; 15 height: 60px; 16 display: inline-block; 17 background: #999; 18 } 19 </style> 20 </head> 21 <body> 22 <div> 23 <div class="box-model">div1</div> 24 <div class="box-model">div2</div> 25 <div class="box-model">div3</div> 26 <div class="box-model">div4</div> 27 </div> 28 </body> 29 </html>
图2. css盒模型样式的修改
接下来讲如何对一个元素进行居中：
1.水平居中：
1.1内联元素的居中
对内联元素居中只需要给其父元素设置 {text-align: center; } 即可；
2.2块级元素
2.2.1宽度固定；若块级元素的宽度是固定的可以同时设置其左右的边距 { margin-left: auto; margin-right: auto; } 为自动让其居中；
2.2.2宽度不定，我们在开发过程中，我们块级元素的宽度大多数是不固定的，对宽度未知的块级元素有很多种方法，现在主要讲一些方法，最主要的是其思想，大家一定要注意体会其思想。
a.利用<table>标签；将元素放在<td>中，给table增加样式 { margin-left: auto; margin-right: auto; }
b.将块状元素修改为内联元素利用内联元素的方法，即修改元素的 { display: inline; } ，并修改其父元素的 {text-align: center; } 。
c.给父元素设置float，并设置 { float:left; position:relative; left:50%; } ，在给该块级元素设置 { position:relative; left:-50%; } 即可。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 .width-block{ 8 width: 200px; 9 margin-left: auto; 10 margin-right: auto; 11 background: #9cc; 12 } 13 table{ 14 margin:0 auto; 15 } 16 table div{ 17 background: #9cc; 18 } 19 .float-father{ 20 float: left; 21 position: relative; 22 left: 50%; 23 } 24 .float{ 25 position: relative; 26 left: -50%; 27 background: #fcc; 28 } 29 </style> 30 </head> 31 <body> 32 <div> 33 <div class='width-block'>div center with width</div> 34 </div> 35 <table> 36 <tbody> 37 <tr> 38 <td> 39 <div>div center with table</div> 40 </td> 41 </tr> 42 </tbody> 43 </table> 44 <div class='float-father'> 45 <div class='float'> 46 div with float father 47 </div> 48 </div> 49 </body> 50 </html>
总结：
方法a：虽然实现了块级元素的居中，但是却增加了没有语义的标签。
方法b：改变了标签元素特性，使其成为了内联元素，使得其失去了块状元素的固有特性，如height, width等。
方法c：设置了position为relative，且改变了其层模型属性。
2.垂直居中：
2.1 父元素高度确定的情况下单行文本：只要设置其父元素的line-height与其高度一致即可；
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 #div1{ 8 height: 100px; 9 background: #fcc; 10 line-height: 100px; 11 border: solid; 12 } 13 </style> 14 </head> 15 <body> 16 <div id='div1'> 17 <div>single line text</div> 18 </div> 19 </body> 20 </html>
2.2 父元素高度确定的多行文本
a. 利用<table>标签，css中有一个用于垂直居中的属性vertical-align，但是这个样式只有在table标签中的th或者td中才会生效。因此借助table标签可以使元素垂直居中；
1 <table> 2 <tbody> 3 <tr> 4 <td> 5 <div> 6 <div>text1</div> 7 <div>text2</div> 8 <div>text3</div> 9 </div> 10 </td> 11 </tr> 12 </tbody> 13 </table>
1 td{ 2 height: 200px; 3 vertical-align: middle;/*td默认为middle,可以不设置 */ 4 }
b. 利用 { display: table-cell; } ，其实也是跟方法a类似，这里是通过display来激活vertical-align属性，但是IE8以前的浏览器不支持table-cell。与a方法不同的是这里需要显示去设置 { vertical-align: middle; } 。
1 <div id="table-cell"> 2 <div>div1</div> 3 <div>div2</div> 4 <div>div3</div> 5 <div>div4</div> 6 </div>
1 #table-cell{ 2 display:table-cell; 3 vertical-align:middle; 4 height:200px; 5 background:#fcc; 6 border: solid; 7 }
2.3高度不确定
可以设置父元素的padding对top和bottom一致 { padding-top: 50px; padding-bottom: 50px; } 来控制元素的垂直居中，但是必须是父元素能够设置padding-top和padding-bottom，也就是父元素为行内元素肯定不行。
1 <div class='bypadding'> 2 <div>div1</div> 3 <div>div2</div> 4 <div>div3</div> 5 <div>div4</div> 6 </div>
1 .bypadding{ 2 padding:50px 0; 3 border:solid; 4 background: #fcc; 5 }
总结，在常用CSS居中的解决方法中，我们需要理解css的块级元素、内联元素，并在解决过程中巧妙运用块级元素以及内联元素的特性，有时候可以借助table标签的特性。
文章地址：http://www.cnblogs.com/alvinwei1024/p/4616322.html
