html - 在 div 的中心放置一个按钮

Question

我想在 <div> 的中心放置一个按钮.我希望这个按钮放在两种颜色的中间。我截图了一张我希望它看起来如何的图片，但我似乎无法弄清楚如何去做。

这是我的 HTML 代码:

<div id="enter">
         <div class="row">
            <div class="col-lg-12" id="dcPicture">
                <h1 id="welcome" data-uk-scrollspy="{cls:'uk-animation-fade', delay:300, repeat:true}">
                    WELCOME TO DURACOM
                </h1>
            </div>
        <div class="wrap">
            <div class="fleft" data-uk-scrollspy="{cls:'uk-animation-slide-left'}">
                <h1 id="residential">Residential</h1>
                <img class="home" src="home.png" data-uk-scrollspy="{cls:'uk-animation-slide-bottom', delay: 500}">
            </div>
        <div class="fright" data-uk-scrollspy="{cls:'uk-animation-slide-right'}">
                <h1 id="commercial">Commercial</h1>
                <img class="biz" src="commercial.png" data-uk-scrollspy="{cls:'uk-animation-slide-bottom', delay: 500}">
          </div> 
       </div>

这是我的 CSS:

.wrap {
width: 100%;
overflow:auto;
padding-bottom: 50px;
}

.fleft {
    float:left; 
    width: 50%;
background: #012a6a;
    height: 600px;
}
#residential {
   font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
   font-size: 48px;
   font-weight: 100;
   color: white;
   text-align: center;
   padding-top: 10%;
}
.fright {
float: right;
    background: #117bc2;
    height: 600px;
    width: 50%;
}
#commercial {
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-size: 48px;
    font-weight: 100;
    color: white;
    text-align: center;
    padding-top: 10%;
}
img.home {
    display: block;
    margin-left: auto;
    margin-right: auto
}
img.biz {
    display: block;
    margin-left: auto;
    margin-right: auto;

}

Answer 1

你上面的代码有两个图像，你没有说哪个应该在中间，但是看看这个 Fiddle:https://jsfiddle.net/pfeoda25/哪个使用

position:relative

实现效果。