Html 将图像在div内的中心和中间对齐

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/4888223/
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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 06:30:22  来源:igfitidea点击:

Align image in center and middle within div

htmlcss

提问by Dro1n2

I have following div

我有以下 div

<div id="over" style="position:absolute; width:100%; height:100%>
 <img src="img.png">
</div>

How to align the image so as to be located in the middle and center of div ?

如何对齐图像以位于 div 的中间和中心?

回答by Gurpreet Singh

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>

JSFiddle

JSFiddle

回答by John K.

<div style="display:table-cell; vertical-align:middle; text-align:center">
<img src="img.png">
</div>

回答by aerdman

This can also be done using the Flexbox layout:

这也可以使用 Flexbox 布局来完成:

STATIC SIZE

静态尺寸

.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>

I found the example in this article, which does a great job explaining the how to use layout.

我在这篇文章中找到了这个例子,它很好地解释了如何使用布局。

回答by avrahamcool

Seems to me that you also wanted that image to be vertically centered within the container. (I didn't see any answer that provided that)

在我看来,您还希望该图像在容器内垂直居中。(我没有看到任何提供的答案)

Working Fiddle:

工作小提琴:

  1. Pure CSS solution
  2. Not breaking the document flow (no floats or absolute positioning)
  3. Cross browser compatibility (even IE6)
  4. Completely responsive.
  1. 纯 CSS 解决方案
  2. 不破坏文档流(无浮动或绝对定位)
  3. 跨浏览器兼容性(甚至 IE6)
  4. 完全响应。

HTML

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

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;
}

Note:this solution is good to align any element within any element. for IE7, when applying the .Centeredclass on block elements, you will have to use another trick to get the inline-blockworking. (that because IE6/IE7 dont play well with inline-block on block elements)

注意:此解决方案适用于对齐任何元素内的任何元素。对于 IE7,.Centered在块元素上应用类时,您将不得不使用另一个技巧来获得inline-block工作。(因为 IE6/IE7 不能很好地与块元素上的内联块配合使用)

回答by Nitin

img.centered {
   display: block;
   margin: auto auto;
}

回答by tanveer ahmad dar

You can do this easily by using display:flex css property

您可以使用 display:flex css 属性轻松完成此操作

#over {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

回答by dhir

#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;
}

回答by pawel7318

I still had some issues with other solution presented here. Finally this worked best for me:

我仍然对这里介绍的其他解决方案有一些问题。最后这对我来说最有效:

<div class="parent">
    <img class="child" src="image.png"/>
</div>

css3:

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%;
}

You can read more about that approach at this page.

您可以在此页面阅读有关该方法的更多信息。

回答by Garconis

Basically, setting right and left margin to auto will cause the image to center align.

基本上,将左右边距设置为 auto 会导致图像居中对齐。

<div id="over" style="position:absolute; width:100%; height:100%>
<img src="img.png" style="display: block; margin: 0 auto;">
</div>

回答by Sujay sreedhar

This would be a simpler approach

这将是一种更简单的方法

#over > img{
    display: block;
    margin:0 auto; 
}