如何使一个图像中心(垂直和水平)在一个更大的div

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

怎样才能做到呢?

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

当前回答

在div中

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

2008-12-23 04:48:40

其他回答

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>

相关:居中图像

2017-09-23 01:55:04

使用定位。下面的方法对我很有效:

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

2016-03-24 08:31:54

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

2017-01-23 12:24:58

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

img
{
   display: block;
   margin: auto;
}

2013-10-06 04:19:22

在div中

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

2008-12-23 04:48:40

如何使一个图像中心(垂直和水平)在一个更大的div

推荐文章

最新文章

标签