图像居中对齐的方法有很多吧。 虽然是html的基础，但有一次我忘记了如何设置图像的居中对齐。 先写几个，以后再补充其他方法
div{width: 200px； height: 200px； border: 3px solid skyblue； }
上述代码的效果图
3358 www.Sina.com/img { position : relative； left: 50%； top: 50%； margin: -70px 0 0 -70px； 在img标签上设定位置定位。解决方法一：分别表示将变更元素向右移动母容器宽度的一半的距离，以及将变更元素向下移动母容器高度的一半的距离。 移动距离是以母容器为基准的高度宽度的一半的距离，所以效果如下。
这个图像很大，所以超出了div的范围。
然后，可以将img向后移动，使img元素居中显示。position:relative，left：50%；top：50%表示将img元素向左移动70px，向上移动70px。 这是因为使用的照片素材的宽度为140*140。
登上效果图
3358 www.Sina.com/img { position : relative； left: 50%； top: 50%； transform:translate(-50%、-50%； }其实这里和上面的方法很相似，但我个人觉得这样更实用。 如果说方法有麻烦的地方，那是因为margin值必须根据img元素的大小而变化。 我只要说img元素都一样大就好了，这个要求有点高。
此方法使用名为margin: -70px 0 0 -70px;的二维转换。 该方法的优点是不测量img元素宽度的高度，直接设定百分比值。 transform:translate (那么，使用的百分比实际上相对于元素本身的宽度和高度。
解决方法二：代码展示：
divclass=' parent box ' divclass=' box ' img src='2. jpg ' width=' 100 ' height=' 100 '/div/div设置为二级母容器，第一级为
. parentBox {width: 200px； height: 200px； border : 1px固态红色；/* */display :表； 文本照明3360中心； }然后，在第二级，即img上一级的母容器中放置transform：translate（x轴移动的数值，y轴移动的值）
. box{display: table-cell； vertical-align :中间； }在第一层母容器中放置解决方法三：
在2级设置display：table可以使图像居中
效果图：
解决方法4 :设定主侧轴对齐方式
div class=' a ' img src=' img/Meizu.png '/div div.a { width 3360600 px； height: 200px； border: 1px solid saddlebrown； display :闪存； justify-content 3360空间阵列； align-items3360中心； } div.aimg { border :1 pxsolidred； }将父容器设置为display:flex，并将父容器转换为伸缩框。 这是应用主侧轴对齐方式所必需的。
之后，将主轴对准方式改为display：table-cell
33558 www.Sina.com/internet explorer 10或更早版本的浏览器不支持justify-content属性。
text-align：centerSafari 6.1或更高版本在-webkit-justify-content属性中受支持。
接下来是母容器的侧轴对准方式，vertical-align: middle
33558 www.Sina.com/internet explorer 10或更早版本的浏览器不支持对齐项目属性。
justify-content: space-around;Safari 7.0或更高版本在-webkit-align-items属性中受支持。
不管看什么，照片这已经是中间了。
如果不是因为Internet Explorer 10以前版本的浏览器不支持，实际上这个方法是最佳的。