图片的居中方式有很多种吧，算是html基础，但是某一次我就给忘记怎么设置图片居中了。先写几个，后续再来补充其他方法

div{width: 200px;height: 200px;border: 3px solid skyblue;}

以上代码的效果图

解决方法一：

img{position: relative;left: 50%;top: 50%;margin: -70px 0 0 -70px;
}

给img标签设置position定位，position:relative，left：50%；top：50%分别指将改元素向右移动一半父容器宽度的距离以及向下移动一半父容器高度的距离，由于移动的距离是以父容器为标准的一半高度宽度距离，效果如下：

因为这张图片较大，所以超出了div的范围。。。

之后要将 img往回移动，才能使img元素居中显示，margin: -70px 0 0 -70px;指的是将img元素向左移动70px，向上移动70px（因为用的图片素材的宽高为140*140），这样便能使得图片居中了。

上效果图

解决方法二：

img{position: relative;left: 50%;top: 50%;transform: translate(-50%,-50%);
}

其实这里跟上面的方法是类似的，但是个人觉得这种比较实用，因为方法一有个麻烦的地方，就是margin值必须跟着img元素的大小变化，如果说img元素都是一样的大小倒无所谓，但是这种要求未免有些高。

这种做法是用的2d转换，transform：translate（x轴移动的数值，y轴移动的值），这个方法的好处便在于不用去测量img元素的宽高，直接设置百分比，在transform：translate（）中，使用的百分比其实是相对于元素自身宽高的。

解决方法三：

代码展示：

<div class="parentBox"><div class="box"> <img src="2.jpg" width="100" height="100" /></div>
</div>

设置为两级父容器，第一级设置display：table，将第一级父容器转换成表格类型，

.parentBox {width: 200px;height: 200px;border: 1px solid red;/*  */display: table;text-align: center;
}

之后在第二级，也就是img的上一级父容器设置display：table-cell，

.box{display: table-cell;vertical-align: middle;
}

在第一级父容器中设置text-align：center，

第二级设置vertical-align: middle，便可以达到将图片居中的目的

效果图:

解决方法四：

设置主侧轴对齐方式

<div class="a"><img src="img/MEIZU.png" >
</div>

div.a{width: 600px;height: 200px;border: 1px solid saddlebrown;display: flex;justify-content: space-around;align-items: center;
}
div.a img{border: 1px solid red;
}

给父容器设置display：flex，将父容器转换成伸缩盒子，因为应用主侧轴对齐方式就需要这样。。。。

之后再设置主轴对齐方式为 justify-content: space-around;

注意: Internet Explorer 10 及更早版本浏览器不支持 justify-content 属性。

注意: Safari 6.1 及更新版本通过 -webkit-justify-content 属性支持该属性。

接着设置父容器的侧轴对齐方式，align-items: center;

注意: Internet Explorer 10 及更早版本浏览器不支持 align-items 属性。

注意: Safari 7.0 及更新版本通过 -webkit-align-items 属性支持该属性。

看啥呢，图片这样就已经居中了啊。

如果不是因为Internet Explorer 10 及更早版本浏览器不支持，其实这个方法算是最合适的吧。

html 图片居中方式相关推荐

关于html中的图片居中问题
关于html中的图片居中问题 fox在学习web开发中的HTML中,做了这么一个实验,下面是实验具体代码 <style type="text/css">#t1{font ...
dw图片居中怎么设置_【面试前】css样式垂直/水平/垂直水平居中的方式总结
所有样式设置之前,Body元素可能会自带一个margin属性,需要将其覆盖掉.否则有些方法使用时可能会导致窗口边缘出现滚动条. 所以开始之前需要: 水平居中 1. 父元素设置text-align:ce ...
markdown 图片居中_Markdown更改字体、颜色、大小，插入表格等方法
Markdown 通过简单标记语法,使普通文本内容具有一定格式.但它本身不支持修改字体.字号与颜色等功能的.一.更改字体大小.颜色.更改字体Markdown语法效果如下: 二.更改字体大小.颜色.更 ...
bootstrap 图片居中,浅谈Bootstrap中的垂直水平居中
本篇文章给大家介绍一下Bootstrap3和Bootstrap4的垂直水平居中.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 相关教程推荐:<bootstrap教程> ...
ios 图片居中裁剪_IOS图片裁剪和小图看大图动画
IOS的UIImagePickerController可以让用户通过相机或者相册获取想要的图片,并且通过设置allowsEditing属性允许用户在选择了图片以后对图片进行裁剪.不过在某些时候会出现正 ...
extjs中grid中行内文本或图片居中显示
我是看了网上写的方法调试自己的代码来实现的,实现的方式是当加载store数据时改变grid的行样式,源码如下: html代码: 1 <div id="weatherP_grid-bod ...
div css将文字居中显示图片,css文字居中、图片居中、div居中解决方案
一.文字居中若文字只有一行文本只有一行 .box { width: 200px; height: 200px; background-color: red; } .text { line-heig ...
wps批量图片居中，编号
Word图片居中对齐操作步骤第一步,按下<Ctrl+H>组合键,打开"查找和替换"对话框的"替换"选项卡.将光标放置于"查找内容&quo ...
【杂记】（input获取焦点失去焦点、获取input中输入的值、键盘事件、js事件、Math 属性、手机自适应meta定义、去掉input内置阴影、图片居中、去蓝色默认背景、点击去掉默认边框）
1. input获取焦点失去焦点 input:focus{border:1px red solid:} 获取焦点 .focus()失去焦点.blur() 2. 获取input中输入的值 <inp ...

html 图片居中方式

解决方法一：

解决方法二：

解决方法三：

解决方法四：

html 图片居中方式相关推荐

最新文章

热门文章