本文将简单叙述元素居中的基本方法。
代码区：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>center</title> 6 7 </head> 8 <body> 9 <h1 style="text-align: center">Html中元素的水平居中方式</h1> 10 <p style="text-align: center;">行内元素</p> 11 <div style="margin: 0 auto; width: 200px; text-align: center;">定宽块元素</div> 12 <table align="center"> 13 <tr> 14 <td> 15 <div>不定宽块元素，方法1</div> 16 </td> 17 </tr> 18 </table> 19 <div style="text-align: center;"> 20 <div style="display: inline-block;">不定宽块元素，方法2</div> 21 </div> 22 <div style="height: 30px;"> 23 <div style="float: left; position: relative;left: 50%;"> 24 <div style="position: relative;left: -50%;">不定宽块元素，方法3</div> 25 </div> 26 </div> 27 </div> 28 </html>
正文
一、需要进行水平居中的元素分类：
1，行内元素（不定宽）。
2，定宽块元素。
3，不定宽块元素。
二、基本居中方式：
1，行内元素：text-align：center；
2，定宽块元素：margin：0 auto；
三、不定宽块元素：
1.转化为定宽块元素：把元素封装在table中；table元素会随内容改变宽度，而其宽度值可以被获取到，则可以把table看作为定宽的块元素。
代码实现：
<table style=“margin： 0 auto；”>
<tr>
<td>
<div>align-center</div>
</td>
</tr>
</table>
2.转化为行内元素：把元素封装在一个块父元素中（宽度不影响）；把元素设置成行内元素，把父元素设置居中属性（父元素中的子元素根据父元素的大小进行居中，而不是父元素进行居中）。
代码实现：
<div class=“parent”style=“text-align:center;”>
<div style=”display:inline;”>align-center</div>
</div>
3.使用三层结构，position属性：结构 great-parent>parent>div;great-parent为居中的参考体，parent向右偏移50%（以great-parent为基准），div向左偏移50%（以parent为基准）。
代码实现：
<div class=“great-parent”>
<div class=“parent”
style=“float：left；//获取内容区的宽；
position：relative；left：50%；”>
<div style=“position：relative；
left：-50%；”>align-center</div>
</div>
</div>
*思路：
great-parent参考体；parent父容器；div内容；
1.parent的宽度=div的宽度；
2.patent以great-parent的宽度为基值，向右偏移50%；这时，parent和div的基线（左侧临界线）到达great-parent的中轴线；
3.div以parent的宽度为基值，向左偏移50%；因为parent的宽度=div的宽度，所以div的中轴线和parent的基线以及great-parent的中轴线重合，到达div居中于great-parent的效果。
*难点：float的作用；
由于未设定宽度值的块元素，载入时会继承父元素的宽度值，
一开始所有的元素的宽度值都等于great-parent的宽度；
当执行“float=left；”时，parent的宽度值会被重新赋值，
该值来自其内容的宽度；
parent中只有div，浏览器会计算div的大小，而div自身也没有设定宽度值，则继续计算div内部内容的大小，div内部有字符或者其他内容，div将计算这些内容的显示大小；
然后，div把这个值往上逐级返回到浏览器，浏览器再把这个值赋给parent的宽度值。
最后，由于parent的宽度值被重新赋值，div就再次继承parent的新的宽度值。parent的宽度=div的宽度=div内部内容的宽度。