使用 CSS 将搜索框居中答案

【问题标题】：Centering a search box with CSS使用 CSS 将搜索框居中
【发布时间】：2015-02-10 21:26:19
【问题描述】：

这是定位盒子的主要代码。我需要使搜索输入与其他部分始终以任何尺寸的屏幕为中心。框的输入区域一直移动到屏幕的最右侧，这是一个问题。

.wsite-search {
    position: relative;
    margin-top:78px;
    margin-right:auto;
    margin-bottom:0px;
    margin-left:auto;
}

.wsite-search-input:focus {
    background: #f8f8f8;
    border: 1px solid #000;
}

.wsite-search-input {
    width: 158px;
    height: 19px;
    border: 0;
    padding: 10px 45px 10px 7px !important;
    font-family: 'Oxygen', sans-serif;
    color: #8e8e8e;
    font-size: 17px;
    line-height: 24px;
    background: #fff;
    border: 1px solid #000;
    border-radius: 3px;
    font-weight:300;
}

.wsite-search-button {
    position: absolute;
    width: 18px;
    height: 18px;
    border: 0;
    right: 14px;
    top: 10px;
    background: url(submit-button-v3.png) no-repeat 0px 0px;
}

【问题讨论】：

您介意创建一个 JSfiddle 吗？我确定我可以为您将其居中，但其中包含相关 HTML 和您的 CSS 的 JSfiddle 将帮助我更好地测试它。谢谢。
提供 HTML 代码和 css
难道没有一种简单的方法可以使框始终居中吗？我认为这很简单，但我一直发现问题是盒子相对于屏幕尺寸移动。

标签： html css search css-position

【解决方案1】：

您是否试图仅将输入框本身居中，如果是这样，您可以使用边距将其居中

margin: 0 50%;

http://jsfiddle.net/rlynjb/eyjzhj8s/

如果您想将输入和按钮都居中。您可以将这两个元素包装在一个 div 标签中，并使用 margin: 0 50% 使两个元素居中。

【讨论】：