html把图片定位在盒子中心,css定位可不可控制图片居中？

css定位可以控制图片居中。下面本篇文章就来给大家介绍一下使用CSS position定位属性设置img图片居中的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。

position属性指定一个元素(静态的，相对的，绝对或固定)的定位方法的类型。可以使用绝对定位来实现图片居中。

1、给img的父元素添加相对定位属性(position: relative)，同时，要给子元素也就是图片img元素添加绝对定位属性(position: absolute)。

2、将图片元素的top属性设置为50%，left属性设置为50%。

3、现在我们需要给img元素设置一个负的margin-top、margin-left值，这两个值为你想要实现垂直居中的元素高度的一半，水平居中的

元素宽度的一半。

*如果不确定元素的高度，可以不使用margin-top、margin-left，而是使用transform:translateY(-50%);transform:translateX(-50%);属性。

img图片居中

*{margin: 0;padding:0;}

.demo{

width: 400px;

height: 300px;

margin: 50px auto;

border: 1px dashed #000;

position: relative;

}

.demo img{

width: 200px;

height: 150px;

position: absolute;

top: 50%;

left: 50%;

margin-top: -75px; /* 高度的一半 */

margin-left: -100px; /* 宽度的一半 */

}

效果图：

更多CSS相关知识，可访问 CSS教程 ！！