本文详细介绍了H5中元素居中的多种方法，包括行内元素使用`text-align: center`，定宽块元素用`margin: 0 auto`，以及不定宽块元素的转换方法，如转化为定宽块、行内元素或利用三层结构实现居中效果。
总结
1，不定宽度的行内元素：text-align：center； 或HTML中直接align="center"
按钮中的文字同样可以style="text-align:center;width:100%;"
2，定宽块元素：margin：0 auto；
代码区：
1 DOCTYPE html>
2 <htmllang="en">
3 <head>
4 <metacharset="UTF-8">
5 <title>centertitle>
6
7 head>
8 <body>
9 <h1style="text-align: center">Html中元素的水平居中方式h1>
10 <pstyle="text-align: center;">行内元素p>
11 <divstyle="margin: 0 auto; width: 200px; text-align: center;">定宽块元素div>
12 <tablealign="center">
13 <tr>
14 <td>
15 <div>不定宽块元素，方法1div>
16 td>
17 tr>
18 table>
19 <divstyle="text-align: center;">
20 <divstyle="display: inline-block;">不定宽块元素，方法2div>
21 div>
22 <divstyle="height: 30px;">
23 <divstyle="float: left; position: relative;left: 50%;">
24 <divstyle="position: relative;left: -50%;">不定宽块元素，方法3div>
25 div>
26 div>
27 div>
28 html>
正文
一、需要进行水平居中的元素分类：
1，行内元素(不定宽)。
2，定宽块元素。
3，不定宽块元素。
二、基本居中方式：
1，行内元素：text-align：center；
2，定宽块元素：margin：0 auto；
三、不定宽块元素：
1.转化为定宽块元素：把元素封装在table中；table元素会随内容改变宽度，而其宽度值可以被获取到，则可以把table看作为定宽的块元素。
代码实现：
2.转化为行内元素：把元素封装在一个块父元素中(宽度不影响)；把元素设置成行内元素，把父元素设置居中属性(父元素中的子元素根据父元素的大小进行居中，而不是父元素进行居中)。
代码实现：
align-center
3.使用三层结构，position属性：结构
great-parent>parent>div;great-parent为居中的参考体，parent向右偏移50%(以great-parent为基准)，div向左偏移50%(以parent为基准)。
代码实现：
style=“float：left；//获取内容区的宽；
position：relative；left：50%；”>
left：-50%；”>align-center
*思路：
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内部内容的宽度。
align-center
扫一扫
1689
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
