1、text-align:center;
2、margin:0 auto;
3、display:inline-block; + text-align:center;
4、position:relative; + float:left;
5、line-height
6、上下左右padding
7、position:absolute; + margin:auto;
8、position:absolute; + 负margin
9、position:absolute; + calc()
10、table-cell + vertical-align + inline-block + text-align
11、伪元素 + vertical-align + inline-block + text-align
12、position:absolute; + transform:translate(-50%,-50%);
13、display:flex;
14、background-position:center;
15、writing-mode
1、text-align:center;
<span style="color: #0000ff"><
<span style="color: #800000">p<span style="color: #0000ff">>居中<span style="color: #0000ff"></<span style="color: #800000">p<span style="color: #0000ff">>2、margin:0 auto;
<span style="color: #0000ff"><
<span style="color: #800000">div<span style="color: #0000ff">><<span style="color: #800000">p<span style="color: #0000ff">></<span style="color: #800000">p<span style="color: #0000ff">></<span style="color: #800000">div<span style="color: #0000ff">>3、display:inline-block; + text-align:center;
<span style="color: #0000ff"><
<span style="color: #800000">div<span style="color: #0000ff">><<span style="color: #800000">p<span style="color: #0000ff">>居中<span style="color: #0000ff"></<span style="color: #800000">p<span style="color: #0000ff">></<span style="color: #800000">div<span style="color: #0000ff">>4、position:relative; + float:left;
内容若是过多，会出现横向滚动条，可以在父容器外套一层容器设置overflow:hidden;）
<span style="color: #0000ff"><
<span style="color: #800000">div<span style="color: #0000ff">><<span style="color: #800000">p<span style="color: #0000ff">>居中<span style="color: #0000ff"></<span style="color: #800000">p<span style="color: #0000ff">></<span style="color: #800000">div<span style="color: #0000ff">>5、line-height
<span style="color: #0000ff"><
<span style="color: #800000">p<span style="color: #0000ff">>居中<span style="color: #0000ff"></<span style="color: #800000">p<span style="color: #0000ff">>6、上下左右padding
<span style="color: #0000ff"><
<span style="color: #800000">p<span style="color: #0000ff">>居中<span style="color: #0000ff"></<span style="color: #800000">p<span style="color: #0000ff">>7、position:absolute; + margin:auto;
<span style="color: #0000ff"><
<span style="color: #800000">div<span style="color: #0000ff">><<span style="color: #800000">p<span style="color: #0000ff">></<span style="color: #800000">p<span style="color: #0000ff">></<span style="color: #800000">div<span style="color: #0000ff">>8、position:absolute; + 负margin
<span style="color: #0000ff"><
<span style="color: #800000">div<span style="color: #0000ff">><<span style="color: #800000">p<span style="color: #0000ff">></<span style="color: #800000">p<span style="color: #0000ff">></<span style="color: #800000">div<span style="color: #0000ff">>9、position:absolute; + calc()
不支持）
<span style="color: #0000ff"><
<span style="color: #800000">div<span style="color: #0000ff">><<span style="color: #800000">p<span style="color: #0000ff">></<span style="color: #800000">p<span style="color: #0000ff">></<span style="color: #800000">div<span style="color: #0000ff">>10、table-cell + vertical-align + inline-block + text-align
<span style="color: #0000ff"><
<span style="color: #800000">div<span style="color: #0000ff">><<span style="color: #800000">p<span style="color: #0000ff">>居中<span style="color: #0000ff"></<span style="color: #800000">p<span style="color: #0000ff">></<span style="color: #800000">div<span style="color: #0000ff">>11、伪元素 + vertical-align + inline-block + text-align
<span style="color: #0000ff"><
<span style="color: #800000">div<span style="color: #0000ff">><<span style="color: #800000">p<span style="color: #0000ff">>居中<span style="color: #0000ff"></<span style="color: #800000">p<span style="color: #0000ff">></<span style="color: #800000">div<span style="color: #0000ff">>12、position:absolute; + transform:translate(-50%,-50%);
不支持）
<span style="color: #0000ff"><
<span style="color: #800000">div<span style="color: #0000ff">><<span style="color: #800000">p<span style="color: #0000ff">>居中<span style="color: #0000ff"></<span style="color: #800000">p<span style="color: #0000ff">></<span style="color: #800000">div<span style="color: #0000ff">>13、display:flex;
不支持，本方法适用于所有元素）
<span style="color: #0000ff"><
<span style="color: #800000">div<span style="color: #0000ff">><<span style="color: #800000">p<span style="color: #0000ff">>居中<span style="color: #0000ff"></<span style="color: #800000">p<span style="color: #0000ff">></<span style="color: #800000">div<span style="color: #0000ff">>14、background-position:center;
图片居中，使用透明图片宽高100%，背景图片background-position居中，background-image需要动态加载最好内联，也可以用span代替img，会少加载一张透明图片
方法都可以用于图片居中
<span style="color: #0000ff"><
<span style="color: #800000">p<span style="color: #0000ff">><<span style="color: #800000">img <span style="color: #ff0000">style<span style="color: #0000ff">="background-image:url(images/1.jpg);"<span style="color: #ff0000"> src<span style="color: #0000ff">="images/1.png"<span style="color: #ff0000"> alt<span style="color: #0000ff">="居中"<span style="color: #0000ff">></<span style="color: #800000">p<span style="color: #0000ff">>15、writing-mode
方法1、2、3改
<span style="color: #0000ff"><
<span style="color: #800000">div<span style="color: #0000ff">><<span style="color: #800000">p<span style="color: #0000ff">>居中<span style="color: #0000ff"></<span style="color: #800000">p<span style="color: #0000ff">></<span style="color: #800000">div<span style="color: #0000ff">><span style="color: #0000ff"><
<span style="color: #800000">div<span style="color: #0000ff">><<span style="color: #800000">p<span style="color: #0000ff">>居中<span style="color: #0000ff"></<span style="color: #800000">p<span style="color: #0000ff">></<span style="color: #800000">div<span style="color: #0000ff">><span style="color: #0000ff"><
<span style="color: #800000">div<span style="color: #0000ff">><<span style="color: #800000">p<span style="color: #0000ff">>居中<span style="color: #0000ff"></<span style="color: #800000">p<span style="color: #0000ff">></<span style="color: #800000">div<span style="color: #0000ff">>