按钮未调整移动设备的大小

Question

抱歉。经过一些帮助，我无法将按钮居中并正确安装在移动设备上。我有一个隐藏的div，所以当你点击按钮时，它就会出现，看起来工作正常。我认为我没有很好地构建CSS，所以任何帮助都将不胜感激。谢谢

HTML

<div class="container">
<button type="button" data-toggle-page="#home" class="button">Home 
designing</button>
</div>
<div id="home" class="page">
<div class="section">
<h2 class="kitchen">Kitchen</h2>
</div>
<div class="section">
<h2><a style="text-decoration: none" href="Lounge">Lounge</a></h2>
</div>
<div class="section">
<h2><a style="text-decoration: none" href="Dining">Dining room</a></h2>
</div>
<div class="section">
<h2><a style="text-decoration: none" href="Hall">Hallway</a></h2>
</div>
</div>

CSS

body {
font-family: 'Montserrat', sans-serif;
background: url(image.jpg) no-repeat center center;
background-attachment: fixed;
background-size: 100% 100%;
}
.container {
text-align: center;
max-width: 100%;
}
.button {
background-color: rgba( 0, 0, 0, 0);
/*    text-align: center;*/
margin-top: 200px;
font-size: 100px;
color: #fff;
font-family: 'Montserrat Subrayada', sans-serif;
border: none;
outline: none;
}
.page {
position: absolute;
visibility: hidden;
pointer-events: none;
text-align: center;
}

Answer 1

您可以使用flexbox:将元素居中

.container {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
max-width: 100%;
}

align-items: center;将垂直居中。

justify-content: center;将水平居中。