How to align the button horizontally to the center?

Question

i can't resolve this problem. I want the button in the center.

My HTML:

<section class="about">
      <div class="container-about">
        <div>
          <div class="col-lg-6">
            <h1>Title</h1>
            <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Minus mollitia possimus, perspiciatis iusto voluptates ipsa nam veritatis quibusdam excepturi, repudiandae similique ab a praesentium molestias eius quos tempora assumenda voluptatem.</p>
            <button>Saber más</button>
          </div>
        </div>
      </div>
    </section>

I Try this in my CSS:

.about {
    display: flex;
    justify-content: center;
}

.about button {
    font-size: 22px;
    padding: 10px 20px;
    background-color: #0d0d0d;
    color: #fff;
    border: 2px solid #0d0d0d;
    border-radius: 0px;
    text-transform: uppercase;
    transition: all 0.2s linear;
    transition: all 0.9s;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    text-shadow: 0.5px 0px 0.5px #000;

I try with display: flex and justify-content-center in the container-about

Answer 1

Write CSS For .col-lg-6 { text-align: center; }

or Create the parent div for the button

.center { text-align: center; }

Saber más

Answer 2

2 ways to center the button.

1. Add display: block;margin:0 auto; on button.

.about {
  display: flex;
  justify-content: center;
}

.about button {
  display: block;
  margin: 0 auto;
  font-size: 22px;
  padding: 10px 20px;
  background-color: #0d0d0d;
  color: #fff;
  border: 2px solid #0d0d0d;
  border-radius: 0px;
  text-transform: uppercase;
  transition: all 0.2s linear;
  transition: all 0.9s;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  text-shadow: 0.5px 0px 0.5px #000;
}

<section class="about">
  <div class="container-about">
    <div>
      <div class="col-lg-6">
        <h1>Title</h1>
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Minus mollitia possimus, perspiciatis iusto voluptates ipsa nam veritatis quibusdam excepturi, repudiandae similique ab a praesentium molestias eius quos tempora assumenda voluptatem.</p>
        <button>Saber más</button>
      </div>
    </div>
  </div>
</section>

2. Wrap button by a div and add display: flex;justify-content: center; on it, not .about or .container-about because they are not the parent element of button.

.center-button {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.about button {
  font-size: 22px;
  padding: 10px 20px;
  background-color: #0d0d0d;
  color: #fff;
  border: 2px solid #0d0d0d;
  border-radius: 0px;
  text-transform: uppercase;
  transition: all 0.2s linear;
  transition: all 0.9s;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  text-shadow: 0.5px 0px 0.5px #000;
}

<section class="about">
  <div class="container-about">
    <div>
      <div class="col-lg-6">
        <h1>Title</h1>
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Minus mollitia possimus, perspiciatis iusto voluptates ipsa nam veritatis quibusdam excepturi, repudiandae similique ab a praesentium molestias eius quos tempora assumenda voluptatem.</p>
        <div class="center-button"><button>Saber más</button></div>
      </div>
    </div>
  </div>
</section>