在div中间对齐中间和中间的图像

Question

我有以下div

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

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

Answer 1

的jsfiddle

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>

Answer 2

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

Answer 3

这也可以使用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>

动态尺寸

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>

我在本文中找到了这个例子,它解释了如何使用布局.

Answer 4

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

工作小提琴:

1. 纯CSS解决方案
2. 没有打破文件流(没有浮动或绝对定位)
3. 跨浏览器兼容性(甚至是IE6)
4. 完全响应.

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在块元素上的内联块不能很好地运行)

Answer 5

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

Answer 6

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

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

Answer 7

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

Answer 8

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>

Answer 9

我在这里提出的其他解决方案仍有一些问题.最后这对我来说效果最好:

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

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

Answer 10

基本上,将右边距和左边距设置为自动将导致图像居中对齐.

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

Answer 11

这将是一种更简单的方法

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

Answer 12

将img设置为display:inline-block,同时将上级div设置为text-align:center也可以完成工作

编辑:对那些正在玩显示器的人:inline-block >>>不要忘记,例如两个div

<div>Div1 content</div>NOSPACEHERE<div>Div2 content</div>

他们之间真的没有空格(如此处所示).

只是基本避免它们之间的这些(内联块固有)间隙.我现在正在写的每两个字之间可以看到这些差距!:-)所以..希望这有助于你们中的一些人.

Answer 13

好吧，我们在 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>

Answer 14

简单.2018. FlexBox.检查浏览器支持 - 我可以使用

最小解决方案:

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

Answer 15

我尝试了很多方法,但只有这个方法适用于容器div中的多个内联元素.这是在中间对齐div中的所有内容的代码.

CSS

.divContainer
{
    vertical-align: middle;
    text-align: center; <!-- If you want horizontal center alignment -->
}
.divContainer > *
{
    vertical-align: middle;
}

HTML

<div class="divContainer">
    <span>Middle Text</span>
    <img src="test.png"/>
</div>

示例代码如下:https://jsfiddle.net/yogendrasinh/2vq0c68m/

Answer 16

CSS文件

.over {
    display : block;
    margin : 0px auto;

Answer 17

对此的标记答案不会垂直对齐图像。适用于现代浏览器的解决方案是 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>

Answer 18

只需设置父 div css 属性“text-align:center;”

 <div style="text-align:center; width:100%">
        <img src="img.png"> 
 </div>