css - 你能把按钮居中吗？

Question

帮我将下面的按钮居中

这是我的 codepen link .

不知道如何使按钮居中

#form {
        display: grid;
        align-self: flex-start;
        margin: 0 7.5rem;
        width: 50%;
        grid-template-columns: repeat(2, 1fr);
        grid-column-gap: 2rem;
        grid-row-gap: 1.5rem;
        vertical-align: center;
        margin-top: 5rem;
}

Answer 1

您可以尝试执行此操作以使按钮居中。

您需要设置grid-column-start和grid-column-end，然后将justify-self设置为居中，以便按钮将居中。

button {
            margin-top: 3rem;
            justify-self: center;
            grid-column-start: 1;
            grid-column-end: 3;
        }