CSS中有多种方法可以将图片居中显示,下面简单介绍几种常用的方法: /* 方法1:利用text-align属性 */ img { display: block; /* 必须设置为块级元素才能居中 */
CSS中有多种方法可以将图片居中显示,下面简单介绍几种常用的方法:
/* 方法1:利用text-align属性 */ img { display: block; /* 必须设置为块级元素才能居中 */ margin: 0 auto; /* 将左右边距设为auto即可水平居中 */ text-align: center; /* 将图片包裹的容器的text-align设为center实现垂直居中 */ } /* 方法2:利用定位和transform属性 */ .container { position: relative; /* 将容器设为相对定位 */ } img { position: absolute; /* 将图片绝对定位,相对于容器 */ top: 50%; /* 将上边距设为50% */ left: 50%; /* 将左边距设为50% */ transform: translate(-50%, -50%); /* 利用transform属性向左、向上移动自身宽高的一半实现居中 */ } /* 方法3:利用flex布局 */ /*将父元素设为Flex 容器,在容器上使它成为一个flex 格子*/ .container { display: flex; /* 主轴方向为水平方向,即X轴,即不换行*/ flex-direction: row; /*纵轴方向为垂直方向,即Y轴,即不中间对齐*/ align-items: center; /*将子元素中心对齐*/ justify-content: center;/*将子元素水平居中对齐*/ }
粉丝
0
关注
0
收藏
0