如何在较大的div内制作图像中心(垂直和水平)

Question

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

怎么做到呢？

我可以通过使用text-align: centerdiv 来使它水平居中.但垂直对齐是个问题..

Answer 1

在旧浏览器中工作(IE> = 8)

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

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

Answer 2

就个人而言,我将它作为背景图像放在div中,CSS就是:

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

(假设id="demo"你正在指定div height并width添加一个background不应该是一个问题)

让浏览器承受压力.

Answer 3

另一种方法是创建一个tablewith valign,当然.无论你是否知道div的高度,这都可行.

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

但是你应该css尽可能地坚持下去.

Answer 4

我会设置你的更大的div position:relative;然后为你的形象做这个:

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

这只能起作用,因为您知道图像和包含div的尺寸.这也可以让你在包含div中的其他项目...使用line-height的解决方案不会.

编辑:注意...你的边距是图像大小的一半.

Answer 5

这工作正常:

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

Answer 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过渡.

Answer 7

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

当您知道容器div的大小但不知道所包含图像的大小时,这非常有用.(使用灯箱或图像轮播时经常出现这种情况).

这是你应该尝试的样式:

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

   height:200px;
   width:200px;
 }

 img
 {
   /*Apply any styling here*/        
 }

Answer 8

使用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 */
}

Answer 9

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

Answer 10

在div中

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

Answer 11

Vertical-align是最滥用的css样式之一.对于不是td或css"display:table-cell"的元素,你的预期效果不正常.

这是一个非常好的帖子.http://phrogz.net/CSS/vertical-align/index.html

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

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

Answer 12

在CSS中执行:

img
{

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

Answer 13

@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

Answer 14

通常,我将设置line-height为200px.通常是诀窍.

Answer 15

我有一个图像库,我不知道图像的确切高度或宽度,我只知道它们比它们将被包含的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;

    }

Answer 16

这对我有用:

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

Answer 17

Another way (not mentioned here yet) is with Flexbox.

Just set the following rules on the container div:

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

FIDDLE

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>

A good place to start with Flexbox to see some of it's features and get syntax for maximum browser support is flexyboxes

Also, browser support nowadays is quite good: caniuse

For cross-browser compatibility for display: flex and align-items, you can use the following:

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;

Answer 18

我们可以使用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>

Answer 19

这是一个旧的解决方案,但浏览器市场份额已经足够先进,如果您不担心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>

Answer 20

简单

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