标题说明了一切，这是我在html中的代码：
<div id="outline_box">
<p class="display-2">text</p>
<pstyle="font-family:'Crimson Text', serif;"> more text</p>
</div>
这是我的CSS：
#outline_box{
width: 75%;
position: fixed;
left: 50%;
margin-left: -37.5%;
padding: 100px;
background-color: rgba(78, 97, 108, 0.55);
border-radius: 20px;
border: 1px solid rgba(78, 93, 102, 0.72);
font-family: 'Mr De Haviland', cursive;
color: white;
text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}
在平板电脑和个人电脑上，这一切似乎都工作正常，但是在手机尺寸的屏幕上，文本开箱即用，朝着右边，多数民众赞成在[[完全不正确
编辑CSS媒体查询：
/*---Media Queries --*/
@media (max-width: 992px) {
.social a {
font-size: 4em;
padding: 2rem;
}
}
@media (max-width: 768px) {
.carousel-caption {
top: 45%;
}
再次编辑。因此，我添加了更多CSS，它确实对文本的大小有所帮助，并使文本更接近我想要的内容，但仍然没有居中。我仍在努力^^
#outline_box{ font-size: 140%; font-weight: 500%; padding-bottom: .2rem; }
我从#outline_box中删除了字体属性，并将它们放在单独的类中，可以根据需要使用@media查询来更改它们_
我还简化了用于定位#outline_box的CSS，使其更符合Bootstrap库_您可以在_下方的代码段中看到结果，并且如果将此代码放入浏览器并调整屏幕，大小，您将看到样式调整为适合_
您可以在我创建的类中调整字体大小以适合您的需求
我希望这会有所帮助，但我建议您重温一下如何使用Bootstrap来定位页面上的元素并调整其大小_祝您好运：）
CSS
#outline_box {
background-color: rgba(78, 97, 108, 0.55);
border-radius: 20px;
border: 1px solid rgba(78, 93, 102, 0.72);
color: white;
margin: 0 auto;
padding: 15%;
text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
width: 75%;
}
.largeText {
font-family: 'Mr De Haviland', cursive;
font-size: 6em;
}
.smallText {
font-family:'Crimson Text', serif;
font-size: 1em;
}
@media (max-width: 992px) {
.social a {
font-size: 4em;
padding: 2rem;
}
}
@media (max-width: 768px) {
.largeText { font-size: 3em;}
.carousel-caption {
top: 45%;
}
}
#outline_box { background-color: rgba(78, 97, 108, 0.55); border-radius: 20px; border: 1px solid rgba(78, 93, 102, 0.72); color: white; margin: 0 auto; padding: 15%; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; width: 75%; } .largeText { font-family: 'Mr De Haviland', cursive; font-size: 6em; } .smallText { font-family:'Crimson Text', serif; font-size: 1em; } @media (max-width: 992px) { .social a { font-size: 4em; padding: 2rem; } } @media (max-width: 768px) { .largeText { font-size: 3em;} .carousel-caption { top: 45%; } }<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> </head> <body> <div id="outline_box"> <p class="largeText">text</p> <p class="smallText"> more text</p> </div> </body> </html> <!-- javascript --> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> </body> </html>