How do I center the button

Question

An image of the web page:

I want to put the button in the middle of the first box. I have followed a tutorial from w3 schools but it puts the button in the middle of webpage instead of putting it in the middle of the first box.

My code:

.menus{
    display: flex;
    justify-content: space-evenly;
}

.menu{
    background-color: orange;
    border: 3px solid grey;
    width: 98vh;
    height: 98vh;
}

.menu1{
    min-height: 50px;
}

.menu2{
    min-height: 50px;
}

.menu1 h1{
    magin-top: 50px;
    text-align: center;
}

<div class="menus">

            <!-- program -->
            <div class="menu menu1">
                <h1></h1>
                    <button>button</button>
            </div>

            <!-- items -->
            <div class="menu menu2"></div>
            </div>

use `text-align: center` in `.menu1` – Minal Chauhan Feb 02 '21 at 12:59 — Minal Chauhan, Feb 02 '21 at 12:59

Johannes · Answer 1 · 2021-02-02T13:10:30.513

Add flexbox-settings as shown below to .menu1. This will center all contents of .menu1(alternative solution below):

.menus{
    display: flex;
    justify-content: space-evenly;
}

.menu{
    background-color: orange;
    border: 3px solid grey;
    width: 98vh;
    height: 98vh;
}

.menu1{
    min-height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.menu2{
    min-height: 50px;
}

.menu1 h1{
    magin-top: 50px;
    text-align: center;
}

<div class="menus">

            <!-- program -->
            <div class="menu menu1">
                <h1></h1>
                    <button>button</button>
            </div>

            <!-- items -->
            <div class="menu menu2"></div>
            </div>

Second solution added after comment, which only centers button, but leaves other contents of .menu1 as is.

Note the settings for .menu1 and .menu1 button.

.menus {
  display: flex;
  justify-content: space-evenly;
}

.menu {
  background-color: orange;
  border: 3px solid grey;
  width: 98vh;
  height: 98vh;
}

.menu1 {
  min-height: 50px;
  position: relative;
}

.menu1 button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.menu2 {
  min-height: 50px;
}

.menu1 h1 {
  margin-top: 50px;
  text-align: center;
}

<div class="menus">

  <!-- program -->
  <div class="menu menu1">
    <h1></h1>
    <button>button</button>
  </div>

  <!-- items -->
  <div class="menu menu2"></div>
</div>

When I do this everything I put in menu1 gets centered. I only want to center the button — Umar Zahid, Feb 02 '21 at 13:07

score -1 · Answer 2 · answered Feb 02 '21 at 13:00

You can use Flexbox in your .menu1 class.

.menus{
    display: flex;
    justify-content: space-evenly;
}

.menu{
    background-color: orange;
    border: 3px solid grey;
    width: 98vh;
    height: 98vh;
}

.menu1{
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.menu2{
    min-height: 50px;
}

.menu1 h1{
    magin-top: 50px;
    text-align: center;
}

<div class="menus">

            <!-- program -->
            <div class="menu menu1">
                <h1></h1>
                    <button>button</button>
            </div>

            <!-- items -->
            <div class="menu menu2"></div>
            </div>

score -1 · Answer 3 · answered Feb 02 '21 at 13:01

you can use:

<!DOCTYPE html>
<html>
<head>
    <style>
        .center-div {
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .parent{
            width: 500px;
            height: 500px;
            background: #555
        }
    </style>
</head>
<body>
<div class="center-div parent">
    <button>button</button>
</div>
</body>
</html>

How do I center the button

3 Answers3