How Can I Center a Button Horizontally and Vertically within a Div Using CSS?

Centering a Button within a Div

In CSS, there are several techniques to center content within a parent element. Let's explore the most common approaches to center a button horizontally within a div.

Using Flexbox (Modern Approach)

Flexbox is a CSS layout module that provides flexible and responsive layouts. To center a button vertically and horizontally using Flexbox:

#wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}

Using Fixed Width and Margin (Legacy Approach)

If the button has a fixed width and the parent div's width is fixed or 100%, you can use margins to center it:

button {
  margin: 0 auto;
}

Alternative Methods for Horizontal Centering

• Text-align: Set the text-align property of the parent div to "center."
• margin-left: Calculate half the width of the button and set it as the negative margin for the left side.

Vertical Centering

To center the button vertically, use relative positioning and set the top property to 50%. Then, set position: relative on the button itself:

button {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

Example Code

Here's an example HTML and CSS code to center a button within a div:

<div>

#wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}

This will center the "Hello" button horizontally and vertically within the parent div.

The above is the detailed content of How Can I Center a Button Horizontally and Vertically within a Div Using CSS?. For more information, please follow other related articles on the PHP Chinese website!