Question

我试图使用这个经典技巧将（pumpkinvector.jpg）图像置于.div中：

.pumpkin{
position: relative;
top:50%;
left:50%;
transform: translate(-50%,-50%);
}

它似乎在背景为红色的底部div上工作正常。然而，这只是一个测试，不是我需要图像居中。

我需要将pumpkinvector.jpg图像置于“grid2”div中的“grid2”div里面，在“grid 6 october”div中。十月div有额外的代码和内部类来提供背景图像，并使其在高度和宽度％中按比例调整大小。使用上面相同的居中代码，pumpkinvector.jpg现在流向下一行并开始位于.october div之外。有人可以这么说吗？

请在这里忍受我。我认为添加图像可以帮助您查看我的问题所以我上传到我自己的网站而不是js.fiddle。链接在这里： http://jingsportfolio.com/october.html

请查看来源以查看代码。感谢。

这个问题是不同的，因为它询问如何将div置于其父div具有复杂标记的上下文中，该标记使得任何传统的居中关闭并抛出父div下面的新行。

Answer 1

检查这个小例子可能会有用，如何将图像置于div中心

html代码：

<div class="parent">
    <img src="http://45reu03dndd711szsx3satxn.wpengine.netdna-cdn.com/wp-content//uploads/2015/08/Top-10-best-CSS-development-tools-2015.png"/>
</div>

css代码：

.parent {
    text-align: center;
    width: 100%;
    border: 1px solid #ccc;
}

img .picture {
    width: 40px;
    height: 40px;
}

此代码正在运行here

Answer 2

CSS的水平对齐非常简单：

您想要对齐的项目必须有＆＃34; margin：auto＆＃34;
物品包装必须有固定的宽度。

垂直对齐有点棘手：

此技巧仅在您的包装器具有固定高度且您要对齐的内容是文本标签（如span或p或h1）时才有效
使用包装器的line-height css属性并将其值设置为自己的高度并完成。

或

如果要对齐的内容的高度为300px，则使用margin-top：calc（50％ - 150px）

更改＆＃39; margin-top＆＃39;绝对＆＃34;位置＆＃34; ＆＃34; top＆＃34;属性如果需要

在div中居中img

2 个答案: