我怎样才能让这张图片始终保持在 div 的中心？

Question

我正在使用引导程序来构建自己的网站。我的 PAGE1 分为 3 列。在第三列中，我想在中心放置一张图片，但只能水平放置。我想知道为什么“margin-left：auto;”和“margin-right：auto;”不要做这项工作。请帮我把这张图片居中。

这是相关代码：

HTML：

<div id="PAGE1" class="container-fluid">
        <div id="backgroundDiv1"></div>
        <div id="backgroundDiv2"></div>
        <div style="height:100%" class="row">
            <div id="reihe1"class="col-md-3"></div>
            <div id="reihe2" class="col-md-3"></div>
            <div id="reihe3"class="col-md-6">
                <div id="googleDiv" data-toggle="tooltip" data-placement="left" title="google+"><img id="googleplus" src="google+.png"></div>
                <div id="titel">
                    <p>*******</p>
                    <p>*******</p>
                    <p id="designer">*********</p>
                    <img src="pfeil.png" id="arrow">
                </div>
            </div>
        </div>
    </div>

CSS：

#PAGE1{
    overflow:hidden;
}
#backgroundDiv1{
    position: absolute;
    background-color:#848484;
    width: 1200px;
    height: 500px;
    z-index: 1;
    bottom:0;
    border-top-right-radius:700px;
    border-top-left-radius:200px;
    border-right: solid black 20px; 
}
#backgroundDiv2{
    position: absolute;
    background-color:#742B22;
    width: 800px;
    height: 400px;
    z-index: 2;
    bottom:0;
    border-top-right-radius:400px;
    border-top-left-radius:200px;
    border-right: solid black 20px;
}
#titel{
    position: relative;
    width:100%;
    height:100%;
    text-align:center;
    font-size:450%;
    color:#222222;
    padding-right: 50px;
    padding-top: 100px;
}
#designer{
    font-size: 0.6em!important;
    padding-left: 300px;
}
#arrow{
    margin-left: auto;
    margin-right: auto;
}

Answer 1

它不起作用，因为没有声明图像的宽度。 Margin:auto 仅在对象的宽度已知时有效，通过width:Npx CSS 标签或在 img 标签的情况下，宽度属性。

Answer 2

要么对 img 应用宽度，要么将图像包装在 div 中，然后将 text-align:center 应用到 div。