我有一个页面，里面有一个类(容器)和两个 id。
我希望它对齐类容器，以便它始终位于页面的中心(水平和垂直)。此容器必须适应不同的屏幕尺寸，因此可能无法为容器指定确切的像素数。
这是我的 CSS 的样子:
body {
background-color: #FFFFFF;
margin: 0px;
}
.container {
margin-right: 4vw;
margin-left: 4vw;
display: block;
}
#titletext {
margin: 0;
text-align: center;
text-align-last: justify;
font-size: 7.7vw;
font-weight: bold;
cursor: pointer;
clear: none;
}
#signtext {
width: 90%;
margin-top: 5%;
position: relative;
display: block;
letter-spacing: 5px;
font-size: 18px;
}
html 文件如下所示:
<body>
<div class="container">
<div id="titletext">some text here</div>
<div id="signtext">some more text here</div>
</div>
</body>
对于这个问题，我已经尝试了几种解决方案，我在这里找到了这些解决方案，但在其他地方，我发现它们都不适合我。
最佳答案
我不确定这两个元素是如何嵌套的，但这应该有所帮助
body {
background-color: #FFFFFF;
margin: 0;
}
.container {
display: block;
position: relative;
height:100vh;
}
#titletext {
margin: 0;
text-align: center;
text-align-last: justify;
font-size: 7.7vw;
font-weight: bold;
cursor: pointer;
clear: none;
/*center vertically & horizontally*/
position:absolute; top:50%; left:50%;
-webkit-transform:translate(-50%,-50%);
-moz-transform:translate(-50%,-50%);
-ms-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
text-align:center;
}
#signtext {
width: 90%;
margin-top: 5%;
position: relative;
display: inline-block;
letter-spacing: 5px;
font-size: 18px;
}<div class="container">
<div id="titletext">Centering
<div id="signtext">Vertically & Horizontally</div>
</div>
</div>关于html - CSS 居中对齐，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44741412/