Javascript 尝试使用下拉菜单将搜索框居中

我正试图正确地将自动填充搜索框与其下拉建议列表置于中心位置

因为下拉建议列表将内容向下推，所以我必须将其置于绝对位置。因为我使它的位置：绝对居中的元素是可能的，但我必须使用不同的方式，然后我如何居中搜索框。因此，当我改变屏幕的大小时，两个中心线不会相互对齐

所以我的问题是搜索框（id#关键字）和搜索按钮（id#myBtn）分别设置为60%和10%的宽度，并且彼此相邻。下拉框（id#results）用于居中并位于两者的总长度下。我必须将它设置为60%的宽度。因此，虽然它确实居中，但我认为我做得不对，因为当我相应地移动屏幕大小时，居中不会一起移动

下面是代码的相关部分

<div class="container">
    <div id="jumbo" class="jumbotron">
        <input type="text" value="" placeholder="Search" id="keyword">
        <input type="button" id="myBtn" value="Go">
        <div id="results">
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
        </div>
        <div class="row">
            <div class="col-md-12" id="trainstation" style="background-color:blue;width:100%;margin:auto;height:100px;"></div>
            <div class="clearfix visible-lg"></div>
        </div>
    </div>
</div>

CSS

#keyword {
    width:60%;
    height:50px;
    margin:auto;
    font-size:2vw;
}
#myBtn {
    width:10%;
    height:50px;
    margin:auto;
    font-size:2vw;
    position:relative;
    left:-0.5%;
    border:2px solid #207cca;
    background-color:#207cca;
    color:#fafafa;
}
#myBtn:hover {
    background-color: #fafafa;
    color:#207cca;
}
#results {
    width:60%;
    position:absolute;
    margin: 0 auto;
    left: 0;
    right: 0;
    background-color:white;
    border:1px solid #c0c0c0;
    display:none;
    text-align:left;
    z-index:10000;
}

CSS
#关键词{
宽度：60%；
高度：50px；
保证金：自动；
字体大小：2vw；
}
#myBtn{
宽度：10%；
高度：50px；
保证金：自动；
字体大小：2vw；
位置：相对位置；
左-0.5%；
边框：2个实心#207cca；
背景色：#207cca；
颜色：#fafafa；
}
#myBtn：悬停{
背景色：#fafafa；
颜色：#207cca；
}
#结果{
宽度：60%；
位置：绝对位置；
保证金：0自动；
左：0；
右：0；
背景色：白色；
边框：1px实心#C0C0；
显示：无；
文本对齐：左对齐；
z指数：10000；
}

尝试制作

#jumbo

位置：相对当设置设置为
位置：绝对
的元素偏移量时，请始终记住，此类元素距离是从距离最近的父元素（即
位置：相对
）或到
主体的距离。谢谢。这让我很好地理解了为什么这样做有效