我正在制作一个计算器网络应用，在将鼠标悬停在数字/字符上时遇到困难。我将整个计算器做成一个网格，然后将项目与align-items center居中对齐。当我这样做并悬停时，只有文本会应用边框底部。当每个数字/项目都悬停时，我希望整个网格项目的边框都变底。
我尝试去掉align-items：center，并且可以，但是数字/项没有居中，我必须使用填充来解决这个问题。即使如此，我也无法将所有物品放在想要的地方。例如，我希望等号在其所覆盖的三个框之间垂直居中，但是在我不得不依靠填充时似乎是不可能的。
而且，当我将鼠标悬停在这些项目上时，这些项目会向上移动，这是不希望的。如果这是一个简单的修复，请提供任何支持。
:root {
--primary-dark: rgb(170, 172, 252);
--primary-light: #f29191;
--background: #eee; }
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: inherit; }
html {
box-sizing: border-box;
font-size: 62.5%; }
body {
font-family: sans-serif;
background-color: var(--background);
font-family: 'Noto Sans', sans-serif;
font-weight: 400; }
.calculator {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: min-content repeat(6, 1fr);
min-height: 65rem;
max-width: 40rem;
margin: 20vh auto;
text-align: center;
align-items:center;
background: linear-gradient(135deg, var(--primary-dark), var(--primary-light));
box-shadow: 0 2rem 4.5rem rgba(0, 0, 0, 0.2);
border-radius: 1rem; }
.calculator__mode {
color: #fff;
letter-spacing: 1px;
margin-top: 1.5rem;
font-weight: normal;
font-size: 1.4rem;
cursor: pointer;
transition: all 0.4s cubic-bezier(0.075, 0.82, 0.165, 1); }
.calculator__mode:hover {
transform: translateY(-3px); }
.calculator__input {
grid-column: 1/ -1;
background-color: transparent;
color: #fff;
padding: 1rem 5rem 1rem 0rem;
font-size: 3rem;
border: none;
cursor: pointer;
text-align: right; }
.calculator .btn {
color: #fff;
font-size: 3rem;
cursor: pointer;
padding-top: 2.7rem; }
.calculator .btn:hover {
border-bottom: 5px solid #eee; }
.calculator .btn:active {
background-color: var(--primary-light);
opacity: 50%;
border: none; }
.calculator__0 {
grid-column: 1/ span 1;
grid-row: 7/ span 1; }
.calculator__1 {
grid-column: 1/ span 1;
grid-row: 6/ span 1; }
.calculator__2 {
grid-column: 2/ span 1;
grid-row: 6/ span 1; }
.calculator__3 {
grid-column: 3/ span 1;
grid-row: 6/ span 1; }
.calculator__4 {
grid-column: 1/ span 1;
grid-row: 5/ span 1; }
.calculator__5 {
grid-column: 2/ span 1;
grid-row: 5/ span 1; }
.calculator__6 {
grid-column: 3/ span 1;
grid-row: 5/ span 1; }
.calculator__7 {
grid-column: 1/ span 1;
grid-row: 4/ span 1; }
.calculator__8 {
grid-column: 2/ span 1;
grid-row: 4/ span 1; }
.calculator__9 {
grid-column: 3/ span 1;
grid-row: 4/ span 1; }
.calculator__decimal {
grid-column: 2/ span 1;
grid-row: 7/ span 1; }
.calculator__negative {
grid-column: 3/ span 1;
grid-row: 7/ span 1; }
.calculator__clear {
grid-column: 4/ span 1;
grid-row: 7/ span 1; }
.calculator__equal {
grid-column: 4/ span 1;
grid-row: 4/span 3;
padding-top: 10rem; }
.calculator__plus {
grid-column: 1/ span 1;
grid-row: 3/ span 1; }
.calculator__minus {
grid-column: 2/ span 1;
grid-row: 3/ span 1; }
.calculator__divide {
grid-column: 3/ span 1;
grid-row: 3/ span 1; }
.calculator__multiply {
grid-column: 4/ span 1;
grid-row: 3/span 1; }<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="https://fonts.googleapis.com/css?family=Noto+Sans:400,700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
<title>Calculator</title>
</head>
<body>
<div class="container">
<div class="calculator">
<h3 class="calculator__mode">Regular</h3>
<input class="calculator__input" type="text" placeholder="enter here">
<div class="btn calculator__plus">+</div>
<div class="btn calculator__minus">−</div>
<div class="btn calculator__divide">÷</div>
<div class="btn calculator__multiply">×</div>
<div class="btn calculator__equal">=</div>
<div class="btn calculator__0">0</div>
<div class="btn calculator__1">1</div>
<div class="btn calculator__2">2</div>
<div class="btn calculator__3">3</div>
<div class="btn calculator__4">4</div>
<div class="btn calculator__5">5</div>
<div class="btn calculator__6">6</div>
<div class="btn calculator__7">7</div>
<div class="btn calculator__8">8</div>
<div class="btn calculator__9">9</div>
<div class="btn calculator__decimal">.</div>
<div class="btn calculator__negative">-</div>
<div class="btn calculator__clear">C</div>
</div>
</div>
</body>
</html>添加高度：100％添加到按钮。我还删除了按钮的固定填充，并将其更改为显示flex。将按钮的CSS更改为此：
.calculator .btn {
color: #fff;
font-size: 3rem;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
也请记住删除等于按钮的填充：
.calculator__equal {
grid-column: 4/ span 1;
grid-row: 4/span 3;
}