What are the different ways to center the button

Question

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Random Color</title>
</head>

<body>

    <h1>Welcome!</h1>

    <button>Click Me</button>

    <script src="app.js"></script>

</body>

</html>

i am new to web development

i am unable to center the button how can i centre the button using css

by default is button an inline-element. As such it can be simply aligned with text-align. — tacoshy, Feb 24 '22 at 08:45
@AmirNaeem different case. The linked duplicate is about cenetring a `div` within another `div`. By default a `div` is a block-level-element which spans the entire available width. This causes a complete different issue and solution then a button which is n inline-element with a width to fit-content — tacoshy, Feb 24 '22 at 09:08
@tacoshy there is also a ton of duplicates about buttons as well — Temani Afif, Feb 24 '22 at 09:14

score 0 · Answer 1 · answered Feb 24 '22 at 08:47

The <button> by default is an inline-element. As such it can be aligned by using the text-align-property on the parent.

.parent {
  text-align: center;
}

<div class="parent">
  <button>Test Button</button>
</div>

Alternativly you can self-align the button by switching ot to a block-level-element by declaring button { display: block; } and center it with margin: 0 auto;

button {
  display: block;
  margin: 0 auto;
}

<button>Test Button</button>

Last but not least you could use Flexbox or CSS-Grid however this also requires to declare it on the parent element while you could use text-align in the first place.

What are the different ways to center the button

1 Answers1