Align button to center of div

Question

I'm attempting to center the button on my div, I have created a webiste and I'm making it responsive. I have attempted to use flex and center with justify-content and align-items to center my button, but none of it worked. I attempted other ways, as setting the button width to max, but didn't work. Here is how my div is looking:

This is my html:

<section class="white-bg section" id="contact">
            <div class="main-content intro-content">
                <div class="intro-text">
                    <h2>Cadastre-se para ter acesso a mais configurações!</h2>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. 
                        Numquam placeat ducimus doloribus magni vero non quibusdam explicabo,
                    itaque fugit a tempore culpa totam saepe vitae in corrupti. Nisi,
                    non similique.</p>
                </div>
                <div class="intro-img">
                    <img src="/assets/img/intro-img.svg" alt="Desenho de uma mulher mostrando um aplicativo de telefone">
                </div>

                <div class="contact-form">
                    <fieldset class="form-grid">
                        <legend>Contact me</legend>
                        <div class="form-group">
                            <label for="first-name">First Name</label>
                            <input type="text" name="first-name" id="first-name" placeholder="First name">
                        </div>
                        <div class="form-group">
                            <label for="first-name">Last Name</label>
                            <input type="text" name="last-name" id="last-name" placeholder="Last name">
                        </div>
                        <div class="form-group">
                            <label for="first-name">Email</label>
                            <input type="email" name="email" id="email" placeholder="Email">
                        </div>
                        <div class="form-group full-width">
                            <label for="first-name">Message</label>
                            <textarea name="message" id="message" \
                            cols="30" rows="10" placeholder="Message"></textarea>
                        </div>
                        <div class="form-group">
                            <button type="submit">Send message</button>
                        </div>
                    </fieldset>
                </div>
            </div>
        </section>

This is my css:

.contact-form {
    grid-column: span 2;
}

.contact-form .form-grid {
    border: none;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--gap);
}

.form-group {
    flex: 1 1 320px;
}

.form-group label {
    display: block;
}

.form-group input, .form-group textarea {
    border-radius: 10px;
    padding: 5px;
    background: white;
    outline: none;
    width: 100%;
    font-size: 1.4rem;
}

.full-width {
    width: 100%;
    flex: 1 1 100%;
}

.form-grid legend {
    text-align: left;
    font-style: italic;
    font-size: 1.4rem
} 

.form-group button {
    border: 0.3rem solid black;
    background: none;
    color: black;
    padding: 1rem 1rem;
    font-size: 2rem;
    cursor: pointer;
    transition: all 300ms ease-in-out;
}

.form-group button:hover{
    border: 0.4rem solid #988BC7;
    color: #988BC7;
}

.form-group input:focus{
    border: 3px solid #988BC7;
}

.form-group textarea:focus{
    border: 3px solid #988BC7;
}

.form-group button {
    justify-content: center;
    align-items: center;
}

.footer-content p a{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

Answer 1

Just add style="text-align:center" in the parent div of the button:

<div class="form-group" style="text-align: center">
  <button type="submit">Send message</button>
</div>

Answer 2

The form-group div containing the button should also have a full width and then you can add text-align: center to the form group and it would be in the center.

Answer 3

We could also add flex and justify-content property on the parent div of the button and remove this style from your css which is not needed anymore

.form-group button

<div class="form-group" style="display: flex; justify-content: center;">
  <button type="submit">Send message</button>
</div>

Answer 4

We can add the style properties into .form-output in the css file, like the code below

.form-group {
  display: flex;
  justify-content: center;
}

Hopefully it will be helpful!