Center It Without Deleting the Website

Paul spent twenty minutes on one button. Nova’s fix took a second: remove everything that wasn’t the button. Here’s how to center things the boring way, without casualties.

Center one thing inside its container

Grid does it in two lines, horizontally and vertically.

.container {
  display: grid;
  place-items: center;
}

Center a row of things

Flexbox, when there are several items side by side.

.actions {
  display: flex;
  justify-content: center; /* horizontal */
  align-items: center;     /* vertical */
  gap: 1rem;
}

Center a button in a normal page flow

A button is inline by default, so center it like text, or make it a block with auto margins.

.form-footer { text-align: center; }

/* or */
.submit {
  display: block;
  margin-inline: auto;
}

When you ask an assistant

• Name the element and its container. “Center the Submit button inside .form-footer.”
• Say what can’t change. “Don’t remove or restyle anything else on the page.”
• Ask for the smallest fix. “Add at most a few CSS declarations. No HTML changes.”

If the fix for one button touches more than one rule, something is off.