如何制作一个图像中心(垂直&水平)在更大的div中

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

怎样才能做到呢?

我能够通过使用text-align: center为div水平居中。但垂直对齐是问题。

1071265 次浏览

通常,我将line-height设置为200px。通常是这样的。

我将用position:relative;设置你的大div,然后为你的图像这样做:

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

这只是因为你知道图像和包含的div的尺寸。这也可以让你在包含的div中有其他项目…而使用行高之类的解决方案则不会。

编辑:注意…你的页边距是图像大小的负一半。

在div中

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

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

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

垂直对齐是最常被误用的css样式之一。对于不是td或css“display: table-cell”的元素,它不能像你期望的那样工作。

这是一篇关于这个问题的很好的文章。http://phrogz.net/CSS/vertical-align/index.html

实现你想要的目标最常见的方法是:

  • 填充上/下
  • 绝对位置
  • 行高

就我个人而言,我会把它作为div的背景图像,CSS是这样的:

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

(假设有一个带有id="demo"的div,因为你已经指定了heightwidth,添加background应该不是问题)

让浏览器承担压力。

我有一个图片库,我不知道准确的高度或宽度的图像之前,我只知道他们是小于div,他们将被包含。

通过在容器上组合行高设置并在图像元素上使用vertical-align:中间,我最终使用以下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;


}
你可以用下面的代码水平和垂直地居中图像(在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>

谢谢大家提供的线索。

我用了这个方法

div.image-thumbnail
{
width: 85px;
height: 85px;
line-height: 85px;
display: inline-block;
text-align: center;
}
div.image-thumbnail img
{
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>

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

这是一个老方法,但是浏览器市场份额已经足够大了,如果你不担心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>

在CSS中这样做:

img
{


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

这有点晚了,但这里有一个解决方案,我用垂直对齐元素在一个父div。

当您知道容器div的大小,但不知道包含的图像的大小时,这是有用的。(这是在使用灯箱或图像旋转木马时经常出现的情况)。

以下是你应该尝试的发型:

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


height:200px;
width:200px;
}


img
{
/*Apply any styling here*/
}

适用于旧浏览器(IE >= 8)

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

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

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

img
{
display: block;
margin: auto;
}

这是另一种将所有内容居中的方法。

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

我有这个问题在HTML5中使用CSS3和我的图像在DIV中居中…哦,是的,我不能忘记我必须增加高度来显示图像…有一段时间我不知道它在哪里,直到我做了这个。我不认为位置和显示是必要的。

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

这是正确的:

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

另一种方法(这里还没有提到)是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是开始使用Flexbox的一个好地方

而且,现在的浏览器支持非常好:caniuse

为了实现display: flexalign-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;

我喜欢跳老式马车!

以下是这个答案在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:这也适用于在较小的divs中居中更大的divs。

一个简单而优雅的解决方案,每次都适用于我:

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

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

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

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

外面的容器

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

容易

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

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

简单地设置图像边缘自动如下所示。

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

检查这些example .

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

来,试试这个。

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

你可以设置图像的位置是对齐中心水平

#imageId {
display: block;
margin-left: auto;
margin-right:auto;
}
.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轻松实现这一点。不需要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>

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:

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