How to center an element (search form)?

Question

Here's the code. How to center a search form? This form should be always at the center of the screen no matter what screen resolution is. I tried margin: 0 auto; but it doesn't work.

Thank You.

.search-p--i {
  color: #333;
  font-weight: normal;
  font-size: 20px;
  text-align: center;
  margin-bottom: 30px;
}
.search-p_wrap {
  text-align: center;
}
.search-form button {
  font-weight: bold;
  color: #fff;
  background: blue;
  border: 0;
  -webkit-border-radius: 28px;
  -moz-border-radius: 28px;
  border-radius: 28px;
  padding: 10px 15px 10px 15px;
  font-size: 14px;
}
.search-form input {
  width: 240px;
  height: 40px;
  padding: 0px 5px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4x;
  border: 1px solid #ccc;
}

<div class="search-p">
  <div class="search-p_wrap">
    <h2 class="search-p_h2">Discover</h2>
    <span class="search-p--i">Hi!</span>
  </div>
  <form class="search-form">
    <input type="text" placeholder="Enter" required>
    <button type="submit">Search</button>
  </form>
</div>

Answer 1

Aligning text

Just add text-align: center to form and it is centered on all screen sizes.

text-align: center

This property describes how inline-level content of a block container is aligned.

form {
  text-align: center; /* Add */
}

.search-p--i {
  color: #333;
  font-weight: normal;
  font-size: 20px;
  text-align: center;
  margin-bottom: 30px;
}
.search-p_wrap {
  text-align: center;
}
.search-form button {
  font-weight: bold;
  color: #fff;
  background: blue;
  border: 0;
  -webkit-border-radius: 28px;
  -moz-border-radius: 28px;
  border-radius: 28px;
  padding: 10px 15px 10px 15px;
  font-size: 14px;
}
.search-form input {
  width: 240px;
  height: 40px;
  padding: 0px 5px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4x;
  border: 1px solid #ccc;
}

<div class="search-p">
  <div class="search-p_wrap">
    <h2 class="search-p_h2">Discover</h2>
    <span class="search-p--i">Hi!</span>
  </div>
  <form class="search-form">
    <input type="text" placeholder="Enter" required>
    <button type="submit">Search</button>
  </form>
</div>

Flexbox solution(Modern):

align-items: center

Items are centered in the cross-axis

Note that in the example we are using flex-direction: column. otherwise just use justify-content: center for flex-direction: row

.search-p {
  display: flex;
  flex-direction: column; /* Cross axis alignment; simply said vertical stacking/positioning */
  align-items: center; /* Center cross-axis */
}
.search-p--i {
  color: #333;
  font-weight: normal;
  font-size: 20px;
  text-align: center;
  margin-bottom: 30px;
}
.search-p_wrap {
  text-align: center;
}
.search-form button {
  font-weight: bold;
  color: #fff;
  background: blue;
  border: 0;
  -webkit-border-radius: 28px;
  -moz-border-radius: 28px;
  border-radius: 28px;
  padding: 10px 15px 10px 15px;
  font-size: 14px;
}
.search-form input {
  width: 240px;
  height: 40px;
  padding: 0px 5px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4x;
  border: 1px solid #ccc;
}

<div class="search-p">
  <div class="search-p_wrap">
    <h2 class="search-p_h2">Discover</h2>
    <span class="search-p--i">Hi!</span>
  </div>
  <form class="search-form">
    <input type="text" placeholder="Enter" required>
    <button type="submit">Search</button>
  </form>
</div>

Answer 2

CSS and form validation have nothing to do with each other, one is simply styling - the other is data checking which is handled either client-side by JS (bad idea without server validation) and / or server side by (always do this) so there will be no problem. (reacted on comment).

Some other problems might surface tho since text-align: center only works when elements are display: inline-block - float: left; float: right; display: block; will all break this center.

What I would suggest doing is adding a wrapper that will center the search in the form through means of margin: 0 auto - which is a much more solid way to center elements than text-align: center which as it says is meant for text (even tho I have also abused this property many many many times over).

.search-p--i {
  color: #333;
  font-weight: normal;
  font-size: 20px;
  text-align: center;
  margin-bottom: 30px;
}
.search-p_wrap {
  text-align: center;
}

/* Added a selector here */
.search-form .search-form-field-wrap {
  display: block; /* optional - divs are block by default. */
  width: 80%; /* or anything else */
  margin: 0 auto; /* you're gonna want to use this for centering block elements */
}

.search-form button {
  font-weight: bold;
  color: #fff;
  background: blue;
  border: 0;
  -webkit-border-radius: 28px;
  -moz-border-radius: 28px;
  border-radius: 28px;
  padding: 10px 15px 10px 15px;
  font-size: 14px;
}
.search-form input {
  width: 240px;
  height: 40px;
  padding: 0px 5px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4x;
  border: 1px solid #ccc;
}
form {
  text-align: center;
}

<div class="search-p">
  <div class="search-p_wrap">
    <h2 class="search-p_h2">Discover</h2>
    <span class="search-p--i">Hi!</span>
  </div>
  <form class="search-form">
    <!-- added a wrapper here -->
    <div class="search-form-field-wrap">
      <input type="text" placeholder="Enter" required>
      <button type="submit">Search</button>
    </div>
  </form>
</div>

Answer 3

I like to use the new Flexbox layout to place something in the center, a good guide is here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ Although it's rather new, but it's already supported in majority browsers and it's looking to become the new standard in the next year or so.

/* added new code */
.search-p {
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
}

.search-p--i {
  color: #333;
  font-weight: normal;
  font-size: 20px;
  text-align: center;
  margin-bottom: 30px;
}
.search-p_wrap {
  text-align: center;
}
.search-form button {
  font-weight: bold;
  color: #fff;
  background: blue;
  border: 0;
  -webkit-border-radius: 28px;
  -moz-border-radius: 28px;
  border-radius: 28px;
  padding: 10px 15px 10px 15px;
  font-size: 14px;
}
.search-form input {
  width: 240px;
  height: 40px;
  padding: 0px 5px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4x;
  border: 1px solid #ccc;
}

<div class="search-p">
  <div class="search-p_wrap">
    <h2 class="search-p_h2">Discover</h2>
    <span class="search-p--i">Hi!</span>
  </div>
  <form class="search-form">
    <input type="text" placeholder="Enter" required>
    <button type="submit">Search</button>
  </form>
</div>