如何在更大的div内使图像中心（垂直和水平）居中[重复]

这个问题已经在这里有了答案：

div块内的 CSS中心文本（水平和垂直）（23个答案）

Flexbox：水平和垂直居中（10个答案）

如何在div内垂直对齐图像（35个答案）

如何在div中垂直对齐元素？（28个答案）

3个月前关闭。

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

如何做呢？

我可以通过使用text-align: center div的text-align: center使其水平居中。但是垂直对齐是个问题。

#1楼

在CSS中，方法如下：

img
{

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

#2楼

这有点晚了，但是这是我用来在父div中垂直对齐元素的解决方案。

当您知道容器div的大小而不是所包含图像的大小时，这很有用。 （在使用灯箱或图像轮播时，通常是这种情况）。

这是您应该尝试的样式：

 container div
 {
   display:table-cell;
   vertical-align:middle;

   height:200px;
   width:200px;
 }

 img
 {
   /*Apply any styling here*/        
 }

#3楼

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

绝对位置与自动边距相结合，可以使元素水平和垂直居中。元素位置可以基于使用相对定位的父元素位置。查看结果

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

#4楼

我有一个图片库，之前我不知道它们的确切高度或宽度，我只知道它们比要包含的div小。

通过对容器上的行高设置进行组合并在image元素上使用vertical-align：middle ，我终于使用以下HTML标记和以下CSS将其用于FF 3.5，Safari 4.0和IE7.0。

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;

    }

#5楼

这对我有用。将此添加到图像css：

img
{
   display: block;
   margin: auto;
}

#6楼

这是将所有内容置于任何内容中间的另一种方法。

工作小提琴

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过渡。

#7楼

这可以正常工作：

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

#8楼

另一种方法（此处未提及）是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>

一个很好的开始Flexbox，就看到它的一些特点，并得到语法最大的浏览器支持flexyboxes

另外，如今的浏览器支持也相当不错： caniuse

为了实现跨浏览器的display: flex兼容性display: 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;

#9楼

我喜欢跳旧车！

这是此答案的2015年更新 。我开始使用CSS3 transform来完成定位工作。这使您不必制作任何额外的HTML，也不必进行数学运算（查找事物的半角宽度）就可以在任何元素上使用它！

这是一个示例（结尾是小提琴）。您的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的容器中即可。

这是一个小提琴

BTW：这也可以使BIGGER div在SMALLER div中居中。

#10楼

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

参考： W3

#11楼

使用定位。以下为我工作：

div{
    display:block;
    overflow:hidden;
    width: 200px; 
    height: 200px;  
    position: relative;
}
div img{
    width: 50px; 
    height: 50px;   
    top: 50%;
    left: 50%;
    bottom: 50%;
    right: 50%;
    position: absolute;
}

#12楼

简单

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

#13楼

只需设置图像边距自动，如下所示。

img{
 margin:auto;
 width:50%;
 height:auto;
}

检查这些例子

#14楼

通常，我将line-height设置为200px。通常会骗人。

#15楼

我会用position:relative;设置更大的div position:relative; 然后为您的图像执行以下操作：

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

这仅起作用，因为您知道图像和包含div的尺寸。这也将使您在包含div的其他项中……而使用line-height之类的解决方案则不会。

编辑：注意...您的边距是图像大小的一半。

#16楼

在div中

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

#17楼

当然，另一种方法是使用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 。

#18楼

垂直对齐是最被滥用的CSS样式之一。您对非td或css“ display：table-cell”元素的期望如何不起作用。

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

实现您正在寻找的最常用方法是：

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

#19楼

我一直在尝试使用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>

#20楼

就个人而言，我将其作为div中的背景图像放置，其CSS为：

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

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

让浏览器承受压力。

#21楼

您可以以此设置图像的位置为水平居中对齐

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

#22楼

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

#23楼

我们可以使用flex轻松实现这一点。不需要background-image 。

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

#24楼

 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>

#25楼

使用Flexbox ：

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

#26楼

您可以使用以下代码在水平和垂直方向上居中图像（在IE / FF中有效）。它将图像的顶部边缘恰好位于浏览器高度的50％，并且margin-top（将图像高度的一半向上拉）将其完美居中。

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

#27楼

感谢其他人的线索。

我用这种方法

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

#28楼

这对我有用：

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

#29楼

我发现上面的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;
}

#30楼

这是一个旧的解决方案，但是浏览器的市场占有率已经足够提高，如果您不担心IE7的性能下降，那么您可以在没有IE hack的情况下获得成功。当您知道外部容器的尺寸但可能会或可能不会知道内部图像的尺寸时，此方法会起作用。

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

asdfgh0077

发布了0 篇原创文章 · 获赞 2 · 访问量 1万+

私信关注