如何将图像垂直和水平放置在中心/中间答案

【问题标题】：How to position image in the center/middle both vertically and horizontally如何将图像垂直和水平放置在中心/中间
【发布时间】：2011-06-20 18:16:50
【问题描述】：

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

我怎样才能让图像从这个盒子的中间开始？（纵横居中）

【问题讨论】：

如果不需要内嵌图片，可以考虑将其添加到div的背景中，背景位置为：中心，背景重复：无重复。
相关帖子 - Align image in center and middle within div & Vertically align an image inside a div with responsive height

标签： html css

【解决方案1】：

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

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

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

在此处查看示例：http://jsfiddle.net/JPch8/2/
在支持 display: flex 的现代浏览器中，您只需将容器 div 设置为 display: flex; align-items: center; justify-content: center; 即可完成此操作

在此处查看示例：https://jsfiddle.net/ptz9k3th/

【讨论】：

不错的代码。代码中“font-size”之前的星号是否必要？如果需要，这涵盖了哪些版本的 IE？
我使用了第一个完美运行的语句，我只是将绝对位置替换为相对位置，以使我的所有图像都居中到它们自己的 div 中。谢谢！

【解决方案2】：

将图像放在<div> 和text-align:center; 中而不指定框的大小

<div class="picture_div" style="margin:0px auto; text-align:center;">
     <img src="media/BezierCurve.gif" />
</div>

或者，您可以指定width 和<div> 框的height 以使图像居中（实际上是div 框）。

<div id="blue" style="border:1px solid blue; width:100px; height:100px; margin:10px auto;">
    <img src="media/BezierCurve.gif" />
</div>

【讨论】：

【解决方案3】：

"float:left; position:relative" 可能无法按预期工作。浮动元素被认为是绝对的。

要使图像垂直居中，您需要在 div 上设置高度，并且需要在其父项上设置高度。（垂直居中是一种痛苦）。如果这些是您唯一的元素，我下面的示例将起作用，但请注意容器上的 height: 100% 可能会影响您的其余布局。

<html>
<head><title></title>
<style type="text/css">
html, body { 
     height: 100%;
}

#photo_leftPanel {
     height: 500px; /*guessing*/
     width: 604px;
     float: left;
}

#photo_leftPanel img {
     margin: auto;
     vertical-align: middle;
}
</style>
</head>
<body>
<div id="photo_leftPanel">
<img src="bla.jpg" />
</div>
</body>
</html>

【讨论】：

【解决方案4】：

一个适合现代浏览器的解决方案是 flexbox。可以将 flex 容器配置为水平和垂直对齐其项目。

<div style="display: flex; align-items: center; justify-content: center; width: 600px; height: 600px;">
    <img src="bla.jpg">
</div>

【讨论】：

【解决方案5】：

HTML：

<div id="photo_leftPanel">
   <img src="bla.jpg">
</div>

CSS：

div.photo_leftPanel {
   position: relative;
}

div.photo_leftPanel > img {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}

【讨论】：

【解决方案6】：

我希望我能理解你想要达到的目标。

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

【讨论】：

@Caspar Kleijne 你说得对，我真的不知道如何在 CSS 中使图像居中。我知道 text-align:center，但这对图像有用吗？谢谢
边距：自动；或边距：0自动；如果你只想影响水平对齐。