html 元素水平居中方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>center</title>
</head>
<body>
<h1 style="text-align: center">Html中元素的水平居中方式</h1>
<p style="text-align: center;">行内元素</p>
<div style="margin: 0 auto; width: 200px; text-align: center;">定宽块元素</div>
<table align="center">
<tr>
<td>
<div>不定宽块元素，方法1</div>
</td>
</tr>
</table>
<div style="text-align: center;">
<div style="display: inline-block;">不定宽块元素，方法2</div>
</div>
<div style="height: 30px;">
<div style="float: left; position: relative;left: 50%;">
<div style="position: relative;left: -50%;">不定宽块元素，方法3</div>
</div>
</div>
</div>
</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内部内容的宽度。
