html 分页水平居中 显示在一行

来源：https://blog.csdn.net/linhui03/article/details/78692555

分页一般都不是固定宽度，如果用定位，去计算的话，无法做到绝对的居中，有另外一个方法：用一个大<div>,里面的用a标签，然后大<div>中样式 text-align:center。

使 button 居中

<div>   
   <button  style="display:block;margin:0 auto">按钮居中</button>                      
</div>

按照元素种类分

来源：https://blog.51cto.com/u_16099337/7598771

一、需要进行水平居中的元素分类：

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>

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

<div class="parent" style="text-align: center;">
  <div style="display: inline;">align-center</div>
</div>

1. 使用三层结构，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内容； - parent的宽度=div的宽度； - patent以great-parent的宽度为基值，向右偏移50%；这时，parent和div的基线（左侧临界线）到达great-parent的中轴线； - 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内部内容的宽度。