html - 难以将输入和带边框的文本居中

Question

我在将输入和边框置于我创建的文本周围时遇到困难。我正在尝试以基于百分比的设置将其居中，以便它变得更加灵敏。似乎百分比不对，每次我超过 left: 35%;，它就不再移动了。

这同样适用于我的提交按钮，位于搜索输入内。我把百分比遗漏了，因为它什么也没做。

我已将所有代码存储在这个 fiddle 中:

https://jsfiddle.net/ghp4t489/

但是，要获得查看我正在尝试做的事情的最佳选择，是访问我的网站。 realtorcatch.com/test_index

如何让带有边框/搜索栏的文本在页面中居中？

这是我的 CSS

.search_option_container_out {
    text-align: center;
    top: 450px;
    left: 30%;
    position: absolute;
    z-index: 111;
}
.search_option_box {
    position: absolute;
    text-align: center;
    left: 40%;
}
.search_option_box li {
    display: inline;
    border: 1px solid black;
    line-height: 2em;
    padding: 20px 75px;
    background: rgba(24, 24, 24, 0.3);
    color: #FFFFFF;
    cursor: pointer;
}
.search_option_box li:hover {
    background: rgba(0,0,255, 0.3);
}
.home_searchbar_out {
    text-align: center;
    padding-top: 60px;
}
.home_searchbar {
    padding: 10px;
}
.home_search_input {
    position: absolute;
    left: 45%;
    width: 575px;
    padding: 14px;
    font-size: 1.1em;
}
#home_search_submit {
    padding: 11px 20px;
    position: absolute;
    background-color: blue;
    color: #FFFFFF;
    cursor: pointer;
    font-size: 1.1em;
    z-index: 1;
}

Answer 1

您的代码演示在这里:https://jsfiddle.net/ghp4t489/4/

本质上，您想像这样在页面中使用居中容器的概念:

div {
    width: 100px;
    height: 100px;
    border: 1px solid black;
    position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

<div>my div here</div>

此代码使用 margin: auto 使页面中的 div 居中。

编辑: https://jsfiddle.net/ghp4t489/7/在右侧和输入旁边有按钮

https://jsfiddle.net/ghp4t489/9/在输入的右边有按钮