CSS, how to center the button inside the div box?-CodePudding

this is my first time posting I'm fairly new in front-end web development. I'm having a hard time positioning some of my elements, especially this one every time I change something it doesn't meet my desired position for my button I just need to center it.

body {
  margin: 0;
}

.container {
  display: flex;
  justify-content: space-around;
  background: #1B244A;
  width: 575px;
  height: 385px;
}

h3 {
  text-align: center;
  color: white;
  font-size: 40px;
  position: relative;
  top: 25px;
}

.scoreBox {
  background: black;
  width: 155px;
  height: 120px;
  border-radius: 5px;
  text-align: center;
}

.scoreBox h1 {
  font-size: 90px;
  color: red;
  padding: 10px 0;
  font-family: 'cursed timer', sans-serif;
}

.scoreBtn {
  display: flex;
  justify-content: space-around;
  padding: 10px 0;
}

.scoreBtn button {
  background-color: transparent;
  width: 45px;
  height: 45px;
  border-color: #9AABD8;
  border-radius: 5px;
  color: white;
}

.newGame {}

.newGame button {}

<html>

<head>
  <link rel="stylesheet" href="index.css">
</head>

<body>
  <div >
    <div >

      <h3>HOME</h3>
      <div >
        <h1 id="scoreHome">0</h1>
      </div>

      <div >
        <button onclick="plusOneHome()"> 1</button>
        <button onclick="plusTwoHome()"> 2</button>
        <button onclick="plusThreeHome()"> 3</button>
      </div>
    </div>

    <div >
      <h3>GUEST</h3>
      <div >
        <h1 id="scoreAway">0</h1>
      </div>

      <div >
        <button onclick="plusOneAway()"> 1</button>
        <button onclick="plusTwoAway()"> 2</button>
        <button onclick="plusThreeAway()"> 3</button>
      </div>
    </div>

    <div >
      <button>New Game</button>
    </div>

  </div>
  <script src="index.js"></script>
</body>

</html>

I'm trying to figure out how to center the new game button that I put in a div class called newGame it always stays in the right corner.

CodePudding user response：

Try this and see if it works for you, and you can always change the values to match the position of button according to your need.

.newGame{
  position: absolute;
  left: 15%;
  top: 40%;
  -webkit-transform: translate(-50%, -50%);
}

I guess this is what you are expecting

CodePudding user response：

Use flex property align-items: center; to center any div element vertically when flex-direction in horizontal

body {
  margin: 0;
}

.container {
  display: flex;
  justify-content: space-around;
  background: #1b244a;
  width: 575px;
  height: 385px;
}
h3 {
  text-align: center;
  color: white;
  font-size: 40px;
  position: relative;
  top: 25px;
}

.scoreBox {
  background: black;
  width: 155px;
  height: 120px;
  border-radius: 5px;
  text-align: center;
}

.scoreBox h1 {
  font-size: 90px;
  color: red;
  padding: 10px 0;
  font-family: "cursed timer", sans-serif;
}

.scoreBtn {
  display: flex;
  justify-content: space-around;
  padding: 10px 0;
}

.scoreBtn button {
  background-color: transparent;
  width: 45px;
  height: 45px;
  border-color: #9aabd8;
  border-radius: 5px;
  color: white;
}
.newGame {
  display: flex;
  align-items: center;
}

.newGame button {
}

<html>
  <head>
    <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
    <div >
      <div >
        <h3>HOME</h3>
        <div >
          <h1 id="scoreHome">0</h1>
        </div>

        <div >
          <button onclick="plusOneHome()"> 1</button>
          <button onclick="plusTwoHome()"> 2</button>
          <button onclick="plusThreeHome()"> 3</button>
        </div>
      </div>

      <div >
        <h3>GUEST</h3>
        <div >
          <h1 id="scoreAway">0</h1>
        </div>

        <div >
          <button onclick="plusOneAway()"> 1</button>
          <button onclick="plusTwoAway()"> 2</button>
          <button onclick="plusThreeAway()"> 3</button>
        </div>
      </div>

      <div >
        <button>New Game</button>
      </div>
    </div>
    <script src="index.js"></script>
  </body>
</html>

CodePudding user response：

You can use flex or text-align to center a button inside a div.

Using flex:

.newGame{
   display: flex;
   justify-content: center;
}

.newGame button{}

Using text-align:

.newGame{
   text-align: center;
}

.newGame button{
   display: inline-block;
}