CSS元素文本、图片水平垂直居中方法

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;

<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;

<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

<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">>