我有一个div 200x200px。我想在div的中间放置一个50 x 50 px的图像。

怎样才能做到呢?

我能够得到它的中心水平使用文本对齐:中心的div。但垂直对齐是问题..


当前回答

另一种方法(此处未提及)是使用Flexbox。

只需在container div上设置以下规则:

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

小提琴

div { 宽度:200 px; 身高:200 px; 边框:1px纯绿色; 显示:flex; justify-content:中心; /*对齐水平*/ 对齐项目:中心; /*垂直对齐*/ } < div > < img src = " http://lorempixel.com/50/50/food " alt = " / > < / div >

要了解Flexbox的一些特性并获得最大限度的浏览器支持的语法,最好从flexyboxes开始

此外,现在的浏览器支持也相当不错:caniuse

对于显示:flex和align-items的跨浏览器兼容性,您可以使用以下命令:

display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-flex-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;

其他回答

使用Flexbox:

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

你可以使用以下属性轻松做到这一点:

#内容{ 显示:flex; 对齐项目:中心; 宽度:200 px; 身高:200 px; 边框:1px纯红色; } # myImage { 显示:块; 宽度:50 px; 高度:50 px; 保证金:汽车; 边框:1px纯黄色; } < div id = "内容" > <img id="myImage" src="http://blog.w3c.br/wp-content/uploads/2013/03/css31-213x300.png"> < / div >

引用:W3

easy

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

通常,我将设置行高为200px。通常是这样的。

这对我很管用。将此添加到image css:

img
{
   display: block;
   margin: auto;
}