如何在垂直和水平方向上定位中心/中间的图像

Question

<div id="photo_leftPanel" style="float: left; width: 604px; position: relative;">
<img src="bla.jpg">
</div>

如何让图像从这个盒子的中间开始？(中间垂直和水平)

Answer 1

有几种方法可以做到这一点,如果它需要在所有浏览器(IE7 +和其他浏览器)中工作,你需要做一些不同的事情,使它在某些情况下工作.

1. 使用绝对位置.仅当您知道图像的大小时才有效.在这里你设置它position: absolute; left: 50%; top: 50%; margin: -<half height of image> 0 0 -<half width of image>.

   请参见此处的示例:http://jsfiddle.net/JPch8/

2. 使用margin: 0 auto;text-align: center;和line-height/font-size.这有点棘手,因为对于像图像这样的内联块元素,行高不能像IE那样工作.这就是font-size的用武之地.基本上,您将图像容器的行高设置为与容器的高度相同.这将垂直对齐内联元素,但在IE中,您需要设置字体大小以使其工作.

   请参见此处的示例:http://jsfiddle.net/JPch8/2/

3. 在支持display: flex您的现代浏览器中,只需将容器div设置为即可display: flex; align-items: center; justify-content: center;

   请参见此处的示例:https://jsfiddle.net/ptz9k3th/