css图片居中怎么设置（css图片文字居中代码方法大全）

css图片居中怎么设置，css图片文字居中代码方法大全

css图片居中怎么设置（css图片文字居中代码方法大全）

1、text-align:center;

2、margin:0 auto;

3、display:inline-block; + text-align:center;

css图片居中怎么设置（css图片文字居中代码方法大全）

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; 用于设置为行内元素的水平居中

background-color:#f00; text-align:center;

居中

2、margin:0 auto;

元素自身设置margin:0 auto; 用于设置为块级元素的水平居中（元素宽度固定，且不能浮动、绝对定位）

background-color:#099; } p{ width:100px; height:100px; margin:0 auto; background-color:#f00;

3、display:inline-block; + text-align:center;

用于设置为内联块元素的水平居中（元素不能浮动、绝对定位，注意清除inline-block引起的下边空白）

background-color:#099; text-align:center;

居中

4、position:relative; + float:left;

用于所有元素的水平居中（元素不能绝对定位，且内容若是过多，会出现横向滚动条，可以在父容器外套一层容器设置overflow:hidden;）

position:relative; left:50%; float:left; background-color:#099;

居中

5、line-height

用于单行文本的垂直居中（父容器高度固定）

height:100px; background-color:#f00; line-height:100px;

居中

6、上下左右padding

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

display:inline-block; margin:0; padding:10px; background-color:#f00;

居中

7、position:absolute; + margin:auto;

用于设置为块级元素的水平垂直居中（元素宽高固定）

position:relative; height:100px; background-color:#099;

8、position:absolute; + 负margin

用于设置为块级元素的水平垂直居中（元素宽高固定）

position:relative; height:100px; background-color:#099;

9、position:absolute; + calc()

用于设置为块级元素的水平垂直居中（元素宽高固定，IE8及以下不支持）

position:relative; height:100px; background-color:#099;

10、table-cell + vertical-align + inline-block + text-align

用于设置为内联块元素的水平垂直居中（元素不能浮动、绝对定位，注意清除inline-block引起的下边空白）

display:table-cell; width:100px; height:100px; background-color:#099; text-align:center; vertical-align:middle;

居中

11、伪元素 + vertical-align + inline-block + text-align

用于设置为内联块元素的水平垂直居中（元素不能浮动、绝对定位，注意清除inline-block引起的下边空白）

height:100px; background-color:#099; text-align:center;

居中

12、position:absolute; + transform:translate(-50%, -50%);

用于设置为块级元素的水平垂直居中（IE8及以下不支持）

position:relative; height:100px; background-color:#099;

居中

13、display:flex;

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

display:flex; height:100px; background-color:#099; justify-content:center; align-items:center;

居中

14、background-position:center;

用于图片居中，使用透明图片宽高100%，背景图片background-position居中，background-image需要动态加载最好内联，也可以用span代替img，会少加载一张透明图片

以上方法都可以用于图片居中

height:100px; background-color:#f00;

15、writing-mode

用于垂直居中，根据方法1、2、3改

width:100%; height:100px; background-color:#099; text-align:center; writing-mode:vertical-lr;

居中

width:100%; height:100px; background-color:#099; writing-mode:vertical-lr;

居中

width:100%; height:100px; background-color:#099; text-align:center; writing-mode:vertical-lr;

居中

本文网址：https://www.dingshengweb.cn/jszl/285.html

版权声明： 1.本站内容部分为潍坊鼎晟科技编辑原创文章，部分来源于网络，如需转载，请标注来源网站名字和文章出处链接。 2.本站内容为传递信息使用，仅供参考，也不构成相关建议。 3.部分内容和图片来源于网络，如有侵权，请联系我们处理。