javascript - 使用 CSS 居中 HTML Div

Question

我将如何使用以下 css 将以下 div 水平居中。我尝试了各种方法，但似乎没有任何效果。我该怎么做才能解决这个问题？非常感谢。

CSS:

    @import "compass/css3";

    .flexsearch--wrapper 
    {
    	max-width: 90%;
    	overflow: hidden;
    	background: transparent;
    }
    	
    .flexsearch--form {
    	overflow: hidden;
    	position: relative;
    }
    	
    .flexsearch--input-wrapper {
    	padding: 0 66px 0 0; /* Right padding for submit button width */
    	overflow: hidden;
    }
    
    .flexsearch--input {
      width: 100%;
    }
    
    /***********************
     * Configurable Styles *
     ***********************/
    .flexsearch {
      padding: 0 25px 0 200px; /* Padding for other horizontal elements */
    }
    
    .flexsearch--input {
      -webkit-box-sizing: content-box;
    	-moz-box-sizing: content-box;
    	box-sizing: content-box;
     	height: 60px;
      padding: 0 46px 0 10px;
    	border-color: #333;
      border-radius: 35px; /* (height/2) + border-width */
      border-style: solid;
    	border-width: 5px;
      margin-top: 15px;
      color: #333;
      font-family: 'Helvetica', sans-serif;
    	font-size: 26px;
    	-webkit-appearance: none;
    	-moz-appearance: none;
    }
    	
    .flexsearch--submit {
      position: absolute;
    	right: 0;
    	top: 0;
    	display: block;
    	width: 60px;
    	height: 60px;
      padding: 0;
      border: none;
    	margin-top: 20px; /* margin-top + border-width */
      margin-right: 5px; /* border-width */
    	background: transparent;
      color: #333;
      font-family: 'Helvetica', sans-serif;
      font-size: 40px;
      line-height: 60px;
    }
    
    .flexsearch--input:focus {
      outline: none;
      border-color: #333;
    }
    
    .flexsearch--input:focus.flexsearch--submit {
     	color: #333; 
    }
    
    .flexsearch--submit:hover {
      color: #333;
      cursor: pointer;
    }
    
    ::-webkit-input-placeholder {
    	color: #333;  
    }
    
    input:-moz-placeholder {
      color: #333
    }

    <div class="flexsearch">
    		<div class="flexsearch--wrapper">
    			<form class="flexsearch--form" action="#" method="post">
    				<div class="flexsearch--input-wrapper">
    					<input class="flexsearch--input" type="search" placeholder="Search">
    				</div>
    				<input class="flexsearch--submit" type="submit" value="&#10140;"/>
    			</form>
    		</div>
    </div>

提前致谢。

Answer 1

将 margin: auto; 添加到 .flexsearch--wrapper。然后，从 .flexsearch 中删除 padding 并添加 max-width: 350px;边距:自动；。这样输入看起来不错，并且在使用小宽度视口(viewport)时不会中断。

感谢@NewToJS。

.flexsearch--wrapper 
{
    max-width: 90%;
    overflow: hidden;
    background: transparent;
    margin: auto;
}

.flexsearch--form {
    overflow: hidden;
    position: relative;
}

.flexsearch--input-wrapper {
    padding: 0 66px 0 0; /* Right padding for submit button width */
    overflow: hidden;
}

.flexsearch--input {
  width: 100%;
}

/***********************
 * Configurable Styles *
 ***********************/
.flexsearch {
  /* padding: 0 200px 0 200px; Padding for other horizontal elements */
  margin: auto;
  max-width: 350px;
}

.flexsearch--input {
  -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    height: 60px;
  padding: 0 46px 0 10px;
    border-color: #333;
  border-radius: 35px; /* (height/2) + border-width */
  border-style: solid;
    border-width: 5px;
  margin-top: 15px;
  color: #333;
  font-family: 'Helvetica', sans-serif;
    font-size: 26px;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.flexsearch--submit {
  position: absolute;
    right: 0;
    top: 0;
    display: block;
    width: 60px;
    height: 60px;
  padding: 0;
  border: none;
    margin-top: 20px; /* margin-top + border-width */
  margin-right: 5px; /* border-width */
    background: transparent;
  color: #333;
  font-family: 'Helvetica', sans-serif;
  font-size: 40px;
  line-height: 60px;
}

.flexsearch--input:focus {
  outline: none;
  border-color: #333;
}

.flexsearch--input:focus.flexsearch--submit {
    color: #333; 
}

.flexsearch--submit:hover {
  color: #333;
  cursor: pointer;
}

::-webkit-input-placeholder {
    color: #333;  
}

input:-moz-placeholder {
  color: #333
}

<div class="flexsearch">
        <div class="flexsearch--wrapper">
            <form class="flexsearch--form" action="#" method="post">
                <div class="flexsearch--input-wrapper">
                    <input class="flexsearch--input" type="search" placeholder="Search">
                </div>
                <input class="flexsearch--submit" type="submit" value="&#10140;"/>
            </form>
        </div>
</div>