html 元素水平居中方式

本文将简单叙述元素居中的基本方法。

代码区：

 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;  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看作为定宽的块元素。

代码实现：

<tr>

<td>

<div>align-center</div>

</td>

</tr>

</table>

2.转化为行内元素：把元素封装在一个块父元素中（宽度不影响）；把元素设置成行内元素，把父元素设置居中属性（父元素中的子元素根据父元素的大小进行居中，而不是父元素进行居中）。

代码实现：

<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=“parent”

style=“float：left；//获取内容区的宽；

position：relative；left：50%；”>

<div style=“position：relative；

left：-50%；”>align-center</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内部内容的宽度。