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

Question

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

怎么做？

我可以使用text-align: center作为div，使其水平居中。但垂直对齐是个问题..

Answer 1

在旧浏览器中工作（IE＆gt; = 8）

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

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

另一种方法是使用table创建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

这是另一种将所有内容集中在一起的方法。

Working Fiddle

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

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

使用Flexbox：

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

Answer 10

Vertical-align是最滥用的CSS样式之一。对于非td或css“display：table-cell”的元素，你的预期效果不正常。

这是一篇关于此事的非常好的帖子。 http://phrogz.net/CSS/vertical-align/index.html

实现您所寻找目标的最常用方法是：

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

Answer 11

在CSS中执行：

img
{

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

Answer 12

div中的

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

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

通过对容器上的 line-height 设置进行组合，并在image元素上使用 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;

    }

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

另一种方式（此处尚未提及）是Flexbox。

只需在容器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>

开始使用Flexbox查看其中一些功能并获得最大浏览器支持语法的好地方是flexyboxes

此外，如今的浏览器支持非常好：caniuse

对于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;

Answer 18

我们可以使用flex轻松实现此目的。不需要background-image。

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 19

This is an old solution但浏览器市场份额已经足够先进，如果你不担心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%);
}

Answer 21

我喜欢跳上老式的乐队！

以下是此答案的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的容器中。

Here's a fiddle

BTW：这也适用于将SMIGER div中的BIGGER div对中。

Answer 22

您可以使用下面的代码水平和垂直居中图像（在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>

Answer 23

您可以通过此

设置图像的位置对齐中心水平

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

Answer 24

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

Answer 25

感谢其他所有人提供的线索。

我使用了这种方法

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

Answer 26

match<- paste(Lexicon[order(-nchar(Lexicon))], collapse = '|^')

test<- str_extract_all(Corpus, match, simplify= T)

test
#     [,1]       
#[1,] "animalada"
#[2,] "fe"       
#[3,] "fernandez"
#[4,] "ladrillo" 

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

相关：Center a image

Answer 27

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

Answer 28

使用定位。以下对我有用：

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

Answer 29

https://www.w3.org/Style/Examples/007/center.en.html

IMG.displayed {
  display: block;
  margin-left: auto;
  margin-right: auto 
}

<IMG class="displayed" src="..." alt="...">

Answer 30

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

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

检查这些 example

Answer 31

在这里尝试一下。

.parentdiv {
 height: 400px;
 border: 2px solid #cccccc;
  background: #efefef;
 position: relative;
}
.childcontainer {
 position: absolute;
 left: 50%;
 top: 50%;
}
.childdiv {
 width: 150px;
 height:150px;
 background: lightgreen;
 border-radius: 50%;
 border: 2px solid green;
 margin-top: -50%;
 margin-left: -50%;
}

<div class="parentdiv">
  <div class="childcontainer">
     <div class="childdiv">
     </div>
  </div>
</div>

Answer 32

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

外部容器

• 应该有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>

Answer 33

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

img
{
   display: block;
   margin: auto;
}

Answer 34

我在使用CSS3的HTML5中遇到了这个问题，我的图像在DIV中居中......哦，是的，我不能忘记我是如何添加高度来显示图像的......有一段时间我在我这样做之前想知道它在哪里。我不认为位置和显示是必要的。

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

Answer 35

一个简单而优雅的解决方案，每次都适合我：

<div>
    <p style="text-align:center"><img>Image here</img></p>
</div>

Answer 36

如果你知道父div和图像的大小，你可以使用绝对定位。