中心超大的图像在div中
我一直在尝试理清如何使用CSS只在一个div中居中超大的图像。
我们使用stream体布局，所以图像容器的宽度随着页面宽度而变化（div的高度是固定的）。 图像位于一个div内，并有一个embedded的boxshadow，以便看起来好像你正在浏览图像的页面。
图像本身的大小已经被确定为以最大的可能值填充周围的div（devise具有最大宽度值）。
如果图像比周围的div小，这很容易：
margin-left: auto; margin-right: auto; display: block; 但是当图像大于div时，它只是从左边开始，偏离右边（我们使用overflow：hidden）。
我们可以指定一个宽度= 100％，但浏览器做了一个糟糕的工作调整图像和围绕高质量的图像网页devise中心。
任何关于图像居中的想法，以便溢出：隐藏均匀切割两个边缘？
谢谢
尝试这样的事情。 这应该中间任何巨大的元素在中间垂直和水平相对于其父母，无论他们的大小。
.parent { position: relative; overflow: hidden; } .child { position: absolute; top: -9999px; bottom: -9999px; left: -9999px; right: -9999px; margin: auto; }
这是一个古老的Q，但没有柔性盒或绝对位置的现代解决scheme就像这样。
margin-left: 50%; transform: translateX(-50%);
.outer { border: 1px solid green; margin: 20px auto; width: 20%; padding: 10px 0; /* overflow: hidden; */ } .inner { width: 150%; background-color: gold; /* Set left edge of inner element to 50% of the parent element */ margin-left: 50%; /* Move to the left by 50% of own width */ transform: translateX(-50%); }
<div class="outer"> <div class="inner">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos exercitationem error nemo amet cum quia eaque alias nihil, similique laboriosam enim expedita fugit neque earum et esse ad, dolores sapiente sit cumque vero odit! Ullam corrupti iure eum similique magnam voluptatum ipsam. Maxime ad cumque ut atque suscipit enim quidem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi impedit esse modi, porro quibusdam voluptate dolores molestias, sit dolorum veritatis laudantium rem, labore et nobis ratione. Ipsum, aliquid totam repellendus non fugiat id magni voluptate, doloribus tenetur illo mollitia. Voluptatum.</div> </div>
在div里面放一个大的div，居中，div的内部为中心。
这以水平方式为中心：
HTML：
<div class="imageContainer"> <div class="imageCenterer"> <img src="http://placekitten.com/200/200" /> </div> </div>
CSS：
.imageContainer { width: 100px; height: 100px; overflow: hidden; position: relative; } .imageCenterer { width: 1000px; position: absolute; left: 50%; top: 0; margin-left: -500px; } .imageCenterer img { display: block; margin: 0 auto; }
演示： http : //jsfiddle.net/Guffa/L9BnL/
为了使它垂直居中，你可以使用相同的内部div，但是你需要将图像的高度放在它的内部。
不要使用固定的或明确的宽度或高度的图像标签。 相反，编码：
max-width:100%; max-height:100%;
例如： http : //jsfiddle.net/xwrvxser/1/
我是一个巨大的风扇，使一个图像的div /节点的背景 – 那么你可以使用background-position: center属性居中，无论屏幕大小
比赛迟到了，但是我发现这个方法非常直观。 https://codepen.io/adamchenwei/pen/BRNxJr
CSS
.imageContainer { border: 1px black solid; width: 450px; height: 200px; overflow: hidden; } .imageHolder { border: 1px red dotted; height: 100%; display:flex; align-item: center; } .imageItself { height: auto; width: 100%; align-self: center; }
HTML
<div class="imageContainer"> <div class="imageHolder"> <img class="imageItself" src="http://www.fiorieconfetti.com/sites/default/files/styles/product_thumbnail__300x360_/public/fiore_viola%20-%202.jpg" /> </div> </div>
宽度和高度只是例如：
parentDiv{ width: 100px; height: 100px; position:relative; } innerDiv{ width: 200px; height: 200px; position:absolute; margin: auto; top: 0; left: 0; right: 0; bottom: 0; }
它必须为你工作，如果你的父div的左侧和顶部不是你的屏幕的窗口的顶部和左侧。 它适用于我。
我发现这是一个更优雅的解决scheme，没有flex：
.wrapper { overflow: hidden; } .wrapper img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); /* height: 100%; */ /* optional */ }
