这是我第一次发帖，我对前端web开发相当陌生。我很难定位我的一些元素，尤其是这个每当我改变一些东西它不符合我想要的按钮位置我只需要把它居中。
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 class="container">
<div class="homeTitle">
<h3>HOME</h3>
<div class="scoreBox">
<h1 id="scoreHome">0</h1>
</div>
<div class="scoreBtn">
<button onclick="plusOneHome()">+1</button>
<button onclick="plusTwoHome()">+2</button>
<button onclick="plusThreeHome()">+3</button>
</div>
</div>
<div class="guestTitle">
<h3>GUEST</h3>
<div class="scoreBox">
<h1 id="scoreAway">0</h1>
</div>
<div class="scoreBtn">
<button onclick="plusOneAway()">+1</button>
<button onclick="plusTwoAway()">+2</button>
<button onclick="plusThreeAway()">+3</button>
</div>
</div>
<div class="newGame">
<button>New Game</button>
</div>
</div>
<script src="index.js"></script>
</body>
</html>我想弄清楚如何居中新的游戏按钮，我把它放在一个名为newGame的div类，它总是停留在右角。
试试这个，看看它是否适合你，你可以根据你的需要改变值来匹配按钮的位置。
.newGame{
position: absolute;
left: 15%;
top: 40%;
-webkit-transform: translate(-50%, -50%);
}
我猜这就是你想要的
使用flex属性align-items: center;
设置div元素垂直居中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 class="container">
<div class="homeTitle">
<h3>HOME</h3>
<div class="scoreBox">
<h1 id="scoreHome">0</h1>
</div>
<div class="scoreBtn">
<button onclick="plusOneHome()">+1</button>
<button onclick="plusTwoHome()">+2</button>
<button onclick="plusThreeHome()">+3</button>
</div>
</div>
<div class="guestTitle">
<h3>GUEST</h3>
<div class="scoreBox">
<h1 id="scoreAway">0</h1>
</div>
<div class="scoreBtn">
<button onclick="plusOneAway()">+1</button>
<button onclick="plusTwoAway()">+2</button>
<button onclick="plusThreeAway()">+3</button>
</div>
</div>
<div class="newGame">
<button>New Game</button>
</div>
</div>
<script src="index.js"></script>
</body>
</html>