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;

父容器上设置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;

display

<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

父容器上设置上下左右padding，用于设置为内联块、块级元素的水平垂直居中（常用于按钮中）

display

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

ottom

<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

display display

<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

display display

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

父容器上设置display:flex; 用于所有元素的水平垂直居中（IE10及以下不支持，本方法适用于所有元素）

display

<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，会少加载一张透明图片

方法都可以用于图片居中

display

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

display

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

display

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