Html 如何在垂直和水平方向的中心/中间定位图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4888118/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to position image in the center/middle both vertically and horizontally
提问by Karem
<div id="photo_leftPanel" style="float: left; width: 604px; position: relative;">
<img src="bla.jpg">
</div>
How can i make the image start from the middle of this box? (middle both vertical and horizontal)
我怎样才能让图像从这个盒子的中间开始？（垂直和水平中间）
回答by Martin Jespersen
There are several ways to do this, and if it needs to work in all browsers (IE7+ and the rest) you need to do different things to make it work in some of the cases.
有几种方法可以做到这一点，如果它需要在所有浏览器（IE7+ 和其他浏览器）中工作，您需要做不同的事情才能使其在某些情况下工作。
Use absolute position. This only works if you know the size of the image. Here you set it to
position: absolute; left: 50%; top: 50%; margin: -<half height of image> 0 0 -<half width of image>.See example here: http://jsfiddle.net/JPch8/
Use
margin: 0 auto;text-align: center;andline-height/font-size. This is a bit more tricky, since line-height doesn't work as it should in IE for inline-block elements like images. That's where the font-size comes in. Basically, you set the line-height of the image container to the same as the container's height. This will vertically align inline elements, but in IE you need to set the font-size instead to make it work.See example here: http://jsfiddle.net/JPch8/2/
In modern browsers that support
display: flexyou can do it by simply setting the container div todisplay: flex; align-items: center; justify-content: center;See example here: https://jsfiddle.net/ptz9k3th/
使用绝对位置。这仅在您知道图像的大小时才有效。在这里您将其设置为
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。这有点棘手，因为行高在 IE 中对于像图像这样的行内块元素不起作用。这就是字体大小的用武之地。基本上，您将图像容器的行高设置为与容器的高度相同。这将垂直对齐内联元素，但在 IE 中，您需要设置字体大小才能使其工作。请参阅此处的示例：http: //jsfiddle.net/JPch8/2/
在支持
display: flex您的现代浏览器中，只需将容器 div 设置为display: flex; align-items: center; justify-content: center;请参阅此处的示例：https: //jsfiddle.net/ptz9k3th/
回答by Kagan Agun
put the image in a <div>with text-align:center;without specifying the size of the box
将图像放入一个<div>withtext-align:center;而不指定框的大小
<div class="picture_div" style="margin:0px auto; text-align:center;">
<img src="media/BezierCurve.gif" />
</div>
alternatively you can specify widthand the heightof the <div>box in order to center the image (actually the div box).
或者你也可以指定width与height该的<div>，以中央的图像（实际上是格箱）箱。
<div id="blue" style="border:1px solid blue; width:100px; height:100px; margin:10px auto;">
<img src="media/BezierCurve.gif" />
</div>
回答by WDuffy
A suitable solution for modern browsers is flexbox. A flex container can be configured to align its items both horizontally and vertically.
适用于现代浏览器的解决方案是 flexbox。Flex 容器可以配置为水平和垂直对齐其项目。
<div style="display: flex; align-items: center; justify-content: center; width: 600px; height: 600px;">
<img src="bla.jpg">
</div>
回答by Mindfield Studio
HTML:
HTML：
<div id="photo_leftPanel">
<img src="bla.jpg">
</div>
CSS:
CSS：
div.photo_leftPanel {
position: relative;
}
div.photo_leftPanel > img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
回答by Cfreak
"float:left; position:relative" probably doesn't work as expected. Floated elements are considered absolute.
" float:left; position:relative" 可能没有按预期工作。浮动元素被认为是绝对的。
To get the image centered vertically you need a height on the div, and you need height on it's parents. (Centering vertically is kind of a pain). My example below will work if those are your only elements but be aware that height: 100%on the containers will likely affect the rest of your layout.
要使图像垂直居中，您需要在 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>
回答by Or Weinberger
I hope I understand what you are trying to achieve.
我希望我明白你想要达到的目标。
<div id="photo_leftPanel" style="float: left; width: 604px; position: relative;">
<center><img src="bla.jpg" style="vertical-align:middle;"></center>
</div>
