如何在一个更大的div内制作图像中心（垂直和水平）

我有一个200×200像素的div。我想要在div中间放置一个50 x 50像素的图像。

如何做呢？

我能够通过使用text-align: center div的中心水平居中。但垂直alignment是问题..

就个人而言，我会把它作为背景图像在div中，CSS是这样的：

 #demo { background: url(bg_apple_little.gif) no - repeat center center; height: 200px; width: 200px; }

（假设id="demo"的div，因为您已经指定了height和width添加background不应该成为问题）

让浏览器承受压力。

在旧版浏览器中工作（IE> = 8）

绝对位置结合自动保证金允许水平和垂直居中元素。元素位置可以基于使用相对定位的父元素位置。查看结果

 img { position: absolute; margin: auto; top: 0; left: 0; right: 0; bottom: 0; }

另一种方法是创build一个包含valign的table 。无论你是否知道div的高度，这都可以工作。

 <div> <table width="100%" height="100%" align="center" valign="center"> <tr><td> <img src="foo.jpg" alt="foo" /> </td></tr> </table> </div>

但是只要可能，你应该总是坚持使用css 。

我会设置你的较大的股利position:relative; 然后为您的图像做到这一点：

 img.classname{ position:absolute; top:50%; left:50%; margin-top:-25px; margin-left:-25px; }

这只适用于因为你知道图像和包含div的尺寸。这也可以让你有其他项目在包含div …解决scheme喜欢使用行高不会。

编辑：请注意…您的利润是图像大小的负一半。

这工作正常：

 display: block; margin-left: auto; margin-right: auto

否则试试这个，如果上面只给你横向居中：

 .outerContainer { position: relative; } .innerContainer { width: 50px; //your image/element width here height: 50px; //your image/element height here overflow: auto; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; }

这是迟来了，但这里是一个解决scheme，我用垂直alignment父div中的元素。

当你知道容器div的大小，而不是包含的图像的大小时，这是非常有用的。 （在使用灯箱或图像传送带时，情况经常是这样）。

这里是你应该尝试的样式：

  container div { display:table-cell; vertical-align:middle; height:200px; width:200px; } img { /*Apply any styling here*/ }

这里是另一种将任何东西都集中在一起的方法

工作小提琴

HTML：（像以前一样简单）

 <div class="Container"> <div class="Content"> /*this can be an img, span, or everything else*/ I'm the Content </div> </div>

CSS：

 .Container { text-align: center; } .Container:before { content: ''; height: 100%; display: inline-block; vertical-align: middle; } .Content { display: inline-block; vertical-align: middle; }

优点

容器和内容高度是未知的。

居中没有具体的负边距，没有设置行高（所以适用于多行文本），没有脚本，也很好地与CSS转换。

我发现上面的Valamas和Lepu的答案是处理未知大小的图像的最直接的答案，或者是您不想将其硬编码到CSS中的已知大小的图像。我只做了一些小的调整：删除不相关的样式，将其大小调整为200px以匹配问题，并添加max-height / max-width来处理可能太大的图像。

 div.image-thumbnail { width: 200px; height: 200px; line-height: 200px; text-align: center; } div.image-thumbnail img { vertical-align: middle; max-height: 200px; max-width: 200px; }

垂直alignment是最误用的CSS样式之一。它不工作如何你可能期望不是td或css“display：table-cell”的元素。

这是一个很好的post。 http://phrogz.net/CSS/vertical-align/index.html

实现你要找的东西最常用的方法是：

填充顶部/底部
绝对位置
行高

在CSS中做到这一点：

 img { display:table-cell; vertical-align:middle; margin:auto; }

通常，我将设置line-height为200px。通常做的伎俩。

在div中

 style="text-align:center; line-height:200px"

@sleepy您可以使用以下属性轻松完成此操作：

 #content { display: flex; align-items: center; width: 200px; height: 200px; border: 1px solid red; } #myImage { display: block; width: 50px; height: 50px; margin: auto; border: 1px solid yellow; }

 <div id="content"> <img id="myImage" src="http://blog.w3c.br/wp-content/uploads/2013/03/css31-213x300.png"> </div>

我有一个画廊的图片，我不知道图像的确切高度或宽度，我只知道他们是小于他们将被包含的股利。

通过在容器上使用行高设置和在图像元素上使用vertical-align：middle ，我终于可以在FF 3.5，Safari 4.0和IE7.0上使用下面的HTML标记和下面的CSS来工作。

HTML标记

 <div id="gallery"> <div class="painting"> <a href="Painting/Details/2"> <img src="/Content/Images/Paintings/Thumbnail/painting_00002.jpg" /> </a> </div> <div class="painting"> ... </div> ... </div>

CSS

 div.painting { float:left; height:138px; /* fixed dimensions */ width: 138px; border: solid 1px white; background-color:#F5F5F5; line-height:138px; text-align:center; } div.painting a img { border:none; vertical-align:middle; }

这适用于我：

 <body> <table id="table-foo"> <tr><td> <img src="foo.png" /> </td></tr> </table> </body> <style type="text/css"> html, body { height: 100%; } #table-foo { width: 100%; height: 100%; text-align: center; vertical-align: middle; } #table-foo img { display: block; margin: 0 auto; } </style>

另一种方式（这里还没有提到）是Flexbox 。

只需在容器div上设置以下规则：

 display: flex; justify-content: center; /* align horizontal */ align-items: center; /* align vertical */

小提琴

 div { width: 200px; height: 200px; border: 1px solid green; display: flex; justify-content: center; /* align horizontal */ align-items: center; /* align vertical */ }

 <div> <img src="http://lorempixel.com/50/50/food" alt="" /> </div>

这是一个旧的解决scheme，但浏览器的市场份额已经足够先进，如果你不关心IE7的退化，你可能会得到IE浏览器的黑客部分。当你知道外部容器的尺寸时，这可以工作，但是可能会或可能不知道内部图像的尺寸。

 .parent { display: table; height: 200px; /* can be percentages, too, like 100% */ width: 200px; /* can be percentages, too, like 100% */ } .child { display: table-cell; vertical-align: middle; margin: 0 auto; }

  <div class="parent"> <div class="child"> <img src="foo.png" alt="bar" /> </div> </div>

简单

 img { transform: translate(50%,50%); }

您可以使用下面的代码水平和垂直居中图像（在IE / FF中工作）。它会将图片的上边缘恰好放置在浏览器高度的50％处，边缘顶部（将图片的高度拉出一半）将完美地居中。

 <style type="text/css"> #middle {position: absolute; top: 50%;} /* for explorer only*/ #middle[id] {vertical-align: middle; width: 100%;} #inner {position: relative; top: -50%} /* for explorer only */ </style> <body style="background-color:#eeeeee"> <div id="middle"> <div id="inner" align="center" style="margin-top:...px"> /* the number will be half the height of your image, so for example if the height is 500px then you will put 250px for the margin-top */ <img src="..." height="..." width="..." /> </div> </div> </body>

我喜欢跳上旧class车！

这是对这个答案的2015年更新 。我开始使用CSS3 transform做我的肮脏的工作定位。这可以让你不必做任何额外的HTML，你不必做math（find半angular的东西），你可以在任何元素上使用它！

这是一个例子（最后小提琴）。你的HTML：

 <div class="bigDiv"> <div class="smallDiv"> </div> </div>

随附CSS：

 .bigDiv { width:200px; height:200px; background-color:#efefef; position:relative; } .smallDiv { width:50px; height:50px; background-color:#cc0000; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); }

我最近做了很多事情，我会给我想要的东西上课，每次都要重复使用这个课程。例如：

 <div class="bigDiv"> <div class="smallDiv centerThis"> </div> </div>

CSS

 .bigDiv { width:200px; height:200px; background-color:#efefef; position:relative; } .smallDiv { width:50px; height:50px; background-color:#cc0000; } .centerThis { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); }

这样，我将永远能够把东西放在它的容器中。你只需要确保你想要居中的东西在一个定义了position的容器中。

这是一个小提琴

顺便说一句：这适用于在SMALLER divs中集中BIGGER div。

您可以通过此设置图像的位置alignment中心

 #imageId { display: block; margin-left: auto; margin-right:auto; }

我一直在尝试使用hmtl和css将图像垂直和水平地置于圆形中。

从这个线程结合几个点后，这是我想出了： jsFiddle

这是三列布局中的另一个例子： jsFiddle

CSS：

 #circle { width: 100px; height: 100px; background: #A7A9AB; -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px; margin: 0 auto; position: relative; } .images { position: absolute; margin: auto; top: 0; left: 0; right: 0; bottom: 0; }

HTML：

 <div id="circle"> <img class="images" src="https://png.icons8.com/facebook-like-filled/ios7/50" /> </div>

感谢所有人的线索。

我用这个方法

 div.image-thumbnail { width: 85px; height: 85px; line-height: 85px; display: inline-block; text-align: center; } div.image-thumbnail img { vertical-align: middle; }

 .container { height: 200px; width: 200px; float:left; position:relative; } .children-with-img { position: absolute; width:50px; height:50px; left:50%; top:50%; transform:translate(-50%); }

我们可以使用flex轻松实现这一点。不需要背景图片

在这里输入图像说明

 <!DOCTYPE html> <html> <head> <style> #image-wrapper{ width:500px; height:500px; border:1px solid #333; display:flex; justify-content:center; align-items:center; } </style> </head> <body> <div id="image-wrapper"> <img id="myImage" src="http://blog.w3c.br/wp-content/uploads/2013/03/css31-213x300.png"> </div> </body> </html>

 div { position: absolute; border: 3px solid green; width: 200px; height: 200px; } img { position: relative; border: 3px solid red; width: 50px; height: 50px; } .center { top: 50%; left: 50%; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); /* IE 9 */ -webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera */ }

 <div class="center"> <img class="center" src="http://placeholders.org/250/000/fff" /> </div>

使用Flexbox： https ：//scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties

 .outerDiv{ display: flex; flex-direction: column; justify-content: center; // Centering y-axis align-items :center ; //Centering x-axis }

这对我有效。添加到图像的CSS：

 img { display: block; margin: auto; }

我在使用CSS3的HTML5中遇到了这个问题，而且我的图像在DIV中居中…哦，是的，我不能忘记我是如何添加高度来显示图像的……我想知道它在哪里直到我做到这一点。我不认为这个立场和展示是必要的。

 background-image: url('../Images/01.png'); background-repeat:no-repeat; background-position:center; position:relative; display:block; height:60px;

将图像垂直和水平居中的最好方法是使用两个容器，并应用以下属性：

在外面的容器

应该有display: table;

内部的容器

应该有display: table-cell;
应该有vertical-align: middle;
应该有text-align: center;

演示

 .outer-container { display: table; width: 80%; /* can be any width */ height: 120px; /* can be any height */ background: #ccc; } .inner-container { display: table-cell; vertical-align: middle; text-align: center; } .inner-container img { background: #fff; padding : 10px; border : 1px solid #000; }

 <div class="outer-container"> <div class="inner-container"> <img src="http://s.gravatar.com/avatar/bf4cc94221382810233575862875e687?r=x&s=50" /> </div> </div>

如何在一个更大的div内制作图像中心（垂直和水平）

优点

在外面的容器

内部的容器

演示

只有CSS的上标？

NVD3图表无法计算Chrome中的图例文字长度，因为Window.getComputedStyle不能正确返回字体大小

Bootstrap下拉菜单不起作用

谷歌浏览器的两种元素风格之间的差异

位置：绝对和父母身高？

如何certificate单个Flexbox项目（覆盖justify-content）

如何在一个div中放置一个（背景）图像？

CSS标签宽度不起作用

如何将页脚（div）alignment到页面的底部？

删除以特定string开头的所有类