我有以下div
<div id="over" style="position:absolute; width:100%; height:100%>
<img src="img.png">
</div>
如何对齐图像以便位于div的中间和中心？
答案 0 :(得分：370)
body {
margin: 0;
}
#over img {
margin-left: auto;
margin-right: auto;
display: block;
}<div id="over" style="position:absolute; width:100%; height:100%">
<img src="http://www.garcard.com/images/garcard_symbol.png">
</div>
答案 1 :(得分：149)
<div style="display:table-cell; vertical-align:middle; text-align:center">
<img src="img.png">
</div>
答案 2 :(得分：89)
这也可以使用Flexbox布局完成：
静态尺寸
.parent {
display: flex;
height: 300px; /* Or whatever */
background-color: #000;
}
.child {
width: 100px; /* Or whatever */
height: 100px; /* Or whatever */
margin: auto; /* Magic! */
}<div class="parent">
<img class="child" src="https://i.vimeocdn.com/portrait/58832_300x300"/>
</div>
DYNAMIC SIZE
html, body {
width: 100%;
height: 100%;
display: flex;
background-color: #999;
}
* {
margin: 0;
padding: 0;
}
.parent {
margin: auto;
background-color: #000;
display: flex;
height: 80%;
width: 80%;
}
.child {
margin: auto; /* Magic! */
max-width: 100%;
max-height: 100%;
}<div class="parent">
<img class="child" src="https://i.vimeocdn.com/portrait/58832_300x300"/>
</div>
我在这个article中找到了一个例子，它解释了如何使用布局。
答案 3 :(得分：87)
在我看来，您还希望图像在容器内垂直居中。 （我没有看到任何提供答案的答案）
<强> HTML
<div id="over">
<span class="Centerer"></span>
<img class="Centered" src="http://th07.deviantart.net/fs71/200H/f/2013/236/d/b/bw_avlonas_a5_beach_isles_wallpaper_image_by_lemnosexplorer-d6jh3i7.jpg" />
</div>
<强> CSS
*
{
padding: 0;
margin: 0;
}
#over
{
position:absolute;
width:100%;
height:100%;
text-align: center; /*handles the horizontal centering*/
}
/*handles the vertical centering*/
.Centerer
{
display: inline-block;
height: 100%;
vertical-align: middle;
}
.Centered
{
display: inline-block;
vertical-align: middle;
}
注意：此解决方案可以对齐任何元素中的任何元素。
对于IE7，当在块元素上应用.Centered类时，您将不得不使用另一个技巧来使inline-block工作。 （因为IE6 / IE7不能很好地与块元素上的内联块一起使用）
答案 4 :(得分：60)
img.centered {
display: block;
margin: auto auto;
}
答案 5 :(得分：28)
您可以使用display：flex css property
轻松完成此操作#over {
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
答案 6 :(得分：27)
#over {position:relative; text-align:center;
width:100%; height:100%; background:#CCC;}
#over img{
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
答案 7 :(得分：11)
我在此处提出的其他解决方案仍然存在一些问题。最后，这对我来说效果最好：
<div class="parent">
<img class="child" src="image.png"/>
</div>
CSS3：
.child {
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%); /* Safari and Chrome */
-moz-transform: translate(-50%, -50%); /* Firefox */
-ms-transform: translate(-50%, -50%); /* IE 9 */
-o-transform: translate(-50%, -50%); /* Opera */
// I suppose you may like those too:
// max-width: 80%;
// max-height: 80%;
}
您可以详细了解该方法at this page。
答案 8 :(得分：10)
基本上，将左右边距设置为自动会使图像居中对齐。
<div id="over" style="position:absolute; width:100%; height:100%>
<img src="img.png" style="display: block; margin: 0 auto;">
</div>
答案 9 :(得分：8)
这将是一种更简单的方法
#over > img{
display: block;
margin:0 auto;
}
答案 10 :(得分：6)
将 img 设置为 display：inline-block ，同时将上级 div 设置为 text-align：center 也会做这个工作
编辑：对那些正在玩显示：inline-block ＆gt;＆gt;＆gt;的人们不要忘记，例如像
这样的两个div<div>Div1 content</div>NOSPACEHERE<div>Div2 content</div>
它们之间确实没有空格（如此处所示）。
基本避免这些（内联块固有）间隙。我现在正在写的每两个字之间可以看到这些差距！ :-)所以..希望这有助于你们中的一些人。
答案 11 :(得分：6)
SIMPLE。 2018. FlexBox。检查浏览器支持 - Can I Use
最小解决方案：
div#over {
display: flex;
justify-content: center;
align-items: center;
}
获得最广泛的浏览器支持：
div#over {
display: -webkit-flex;
display: -ms-flex;
display: flex;
justify-content: center;
-ms-align-items: center;
align-items: center;
}
答案 12 :(得分：5)
我尝试了很多方法，但只有这个方法适用于容器div中的多个内联元素。这是代码将div中的所有内容对齐。
.divContainer
{
vertical-align: middle;
text-align: center; <!-- If you want horizontal center alignment -->
}
.divContainer > *
{
vertical-align: middle;
}
<div class="divContainer">
<span>Middle Text</span>
<img src="test.png"/>
</div>
答案 13 :(得分：5)
CSS文件
.over {
display : block;
margin : 0px auto;
答案 14 :(得分：3)
尝试这个最小代码：
<div class="outer">
<img src="image.png"/>
</div>
和CSS：
.outer{
text-align: center;
}
.outer img{
display: inline-block;
}
答案 15 :(得分：3)
Daaawx的答案行得通，但我认为，如果消除嵌入式CSS，那会更干净。
body {
margin: 0;
}
#over img {
margin-left: auto;
margin-right: auto;
display: block;
}
div.example {
position: absolute;
width: 100%;
height: 100%;
}<div class="example" id="over">
<img src="http://www.garcard.com/images/garcard_symbol.png">
</div>
答案 16 :(得分：2)
这对我有用。
<div class="CenterImage">
<asp:Image ID="BrandImage" runat="server" />
</div>
＆＃39;注意：没有与＆＃39; BrandImage＆＃39;相关联的css类。在这种情况下
CSS：
.CenterImage {
position:absolute;
width:100%;
height:100%
}
.CenterImage img {
margin: 0 auto;
display: block;
}
答案 17 :(得分：2)
好吧，我们在2016年......为什么不使用flexbox？ 它也很敏感。请享用。
#over{
display:flex;
align-items:center;
justify-content:center;
}<div id="over">
<img src="http://www.garcard.com/images/garcard_symbol.png">
</div>
答案 18 :(得分：2)
这对我有用：
#image-id {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
width: auto;
margin: 0 auto;
}
答案 19 :(得分：2)
水平居中只需放
#over img {
display: block;
margin: 0 auto;
clear:both;
}
另一种方法：
#over img {
display: inline-block;
text-align: center;
}
垂直中心只需放置：
#over img {
vertical-align: middle;
}
答案 20 :(得分：2)
<强> HTML：
<div id="over">
<img src="img.png">
</div>
<强> CSS：
#over {
text-align: center;
}
#over img {
vertical-align: middle;
}
答案 21 :(得分：2)
<div>
<p style="text-align:center; margin-top:0px; margin-bottom:0px; padding:0px;">
<img src="image.jpg" alt="image"/>
</p>
</div>
答案 22 :(得分：2)
许多答案建议使用margin:0 auto但这只适用于您尝试居中的元素不是左侧或右侧浮动，即float未设置css属性。为此，请将display属性应用于table-cell，然后将左右边距应用于自动，以使您的样式看起来像style="display:table-cell;margin:0 auto;"
答案 23 :(得分：1)
使用定位。以下对我有用......
缩放到图像的中心（图像填充div）：
div{
display:block;
overflow:hidden;
width: 70px;
height: 70px;
position: relative;
}
div img{
min-width: 70px;
min-height: 70px;
max-width: 250%;
max-height: 250%;
top: -50%;
left: -50%;
bottom: -50%;
right: -50%;
position: absolute;
}
不缩放到图像的中心（图像不填充div）：
div{
display:block;
overflow:hidden;
width: 100px;
height: 100px;
position: relative;
}
div img{
width: 70px;
height: 70px;
top: 50%;
left: 50%;
bottom: 50%;
right: 50%;
position: absolute;
}
答案 24 :(得分：1)
很长一段时间，我也尝试了将 img 放在 div 中心的解决方案，但就我而言，我只需要在 ajax 加载进度上使用这种类型的组件，所以我只是尝试了以下解决方案，希望这会有所帮助给你！
<div id="loader" style="position: absolute;top: 0;right: 0;left: 0;bottom: 0;z-index: 1;background: rgba(255,255,255,0.5) url('your_image_url') no-repeat center;background-size: 135px;display: none;"></div>
答案 25 :(得分：0)
您可以查看此解决方案：
Centering horizontally and vertically an image in a box
<style type="text/css">
.wraptocenter {
display: table-cell;
text-align: center;
vertical-align: middle;
width: ...;
height: ...;
}
.wraptocenter * {
vertical-align: middle;
}
.wraptocenter {
display: block;
}
.wraptocenter span {
display: inline-block;
height: 100%;
width: 1px;
}
</style>
<!--[if lt IE 8]-->
<style>
.wraptocenter span {
display: inline-block;
height: 100%;
}
</style>
<!--[endif]-->
<div class="wraptocenter"><span></span><img src="..." alt="..."></div>
答案 26 :(得分：0)
一种简单的方法是为div和图像创建单独的样式，然后单独定位它们。假设我想将我的图像位置设置为50％，那么我将拥有如下所示的代码....
#over{
position:absolute;
width:100%;
height:100%;
}
#img{
position:absolute;
left:50%;
right:50%;
}<div id="over">
<img src="img.png" id="img">
</div>
答案 27 :(得分：0)
#over {
display: table-cell;
vertical-align: middle;
text-align: center;
height: 100px;
}
根据需要修改高度值。
答案 28 :(得分：0)
这应该有用。
重播测试：要运行代码段，请点击左侧按钮运行代码段，然后右键整页
#fader{
position:fixed;z-index: 10;
top:0;right:0;bottom:0;left:0;
opacity: 0.8;background: black;
width:100%;height:100%;
text-align: center;
}
.faders{display:inline-block;height:100%;vertical-align:middle;}
.faderi{display:inline-block;vertical-align:middle;}<div id="fader">
<span class="faders"></span>
<img class="faderi" src="https://i.stack.imgur.com/qHF2K.png" />
</div>
答案 29 :(得分：0)
使用bootstraps align-items和justify-content。见下面的例子：
<div class="well" style="align-items:center;justify-content:center;">
<img src="img_source" height="50px" width="50px"/>
</div>
答案 30 :(得分：0)
我在CSS中添加了更多属性。像这样：
div#over {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
-ms-align-items: center;
display: -webkit-flex;
display: -ms-flex;
display: flex;
}
答案 31 :(得分：0)
当您必须使图像居中对齐并且父div到图像覆盖整个屏幕时，这对我有用。即高度：100％，宽度：100％
{
"name": "chat-example",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-scripts": "3.0.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [">0.2%", "not dead", "not op_mini all"],
"development": ["last 1 chrome version", "last 1 firefox version", "last 1 safari version"]
}
}
答案 32 :(得分：-1)
为此标记的答案将不会使图像垂直对齐。 flexbox是现代浏览器的合适解决方案。可以将flex容器配置为在水平和垂直方向上对齐其项目。
<div id="over" style="position:absolute; width:100%; height:100%; display: flex; align-items: center; justify-content: center;">
<img src="img.png">
</div>
答案 33 :(得分：-1)
只需设置父div CSS属性“ text-align：center;”
<div style="text-align:center; width:100%">
<img src="img.png">
</div>