css设置宽比屏幕大的img图片在页面中左右居中

时间 2020-01-29

标签 css 设置屏幕大的 img 图片页面左右居中栏目 CSS 繁體版

原文原文链接

一、html结构css

<div class="div1">
   <div class="div2">
       <img src="1.jpg" alt="">
   </div>
</div>html

二、css样式spa

.div1{width: 100%;overflow: hidden;}
.div2{width: 1920px;height: 100px;background-color: #000;margin-left: 50%;}
img{margin-left: -50%;}orm

总结：margin-left:50%;基于父对象宽度的50%左外边距，left:50%;偏移父元素宽度的50%htm

百分点单位基本上就是相对于当前元素的父元素的，除了transform的translate是相对自身对象