使用CSS中心HTML Div

Question

How would I horizontally center the following div with the following css. I've tried various methods but nothing seems to work. What can I do to fix this problem? Thank you very much.

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> 

Thanks in advance.

Answer 1

add margin: auto; to .flexsearch--wrapper . Then, remove the padding from .flexsearch and add max-width: 350px; margin: auto; max-width: 350px; margin: auto; . That way the input looks good and won't break when using small width viewport.

Thanks @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>