我在这里有一个相当令人沮丧的场景，我的字体“历史地图”在使用flexbox的chrome标题框中居中，但在safari浏览器中根本没有。请参阅：http://www.historymaps2.drcrittall.com/welcome.php
这是html和CSS：
/* Parent elements */
html,body {
height:100%;
}
/* Sets the container-fluid, row and column classes to 100% of the html and body elements */
.container-fluid,.row, .col-md-6, .col-xs-10 {
height:100%;
}
#titleframe {
position:relative;
display:-webkit-box;
display:-ms-flexbox;
display:flex;/* Flex-box ensures font is centered both vertically and horizontally within the title frame using align-items and justify-content. See http://stackoverflow.com/questions/5703552/css-center-text-horizontal-and-vertical-inside-a-div-block */
-webkit-box-align:center;
-ms-flex-align:center;
align-items:center;
-webkit-box-pack:center;
-ms-flex-pack:center;
justify-content:center;
max-width:100%; /* max-width ensures background does not stretch outside container div */
height:15%; /* Represents height relative to parent elements - in this case .container-fluid,.row, .col-md-6, .col-xs-10 which are all set to 100% */
border-style:solid;
border-width:2px;
border-color:black;
background: url("../img/pages/frame4.3.jpg");
background-size: 100% 100%; /* Sets background image to fill 100% of container in both x and y directions. See: http://stackoverflow.com/questions/15160764/background-image-stretch-y-axis-only-keep-repeat-x */
background-repeat:no-repeat;
}
#titlepaper {
position:absolute;
top:0px;
left:0px;
right:0px;
bottom:0px;
width:100%;
height:100%;
border-style:solid;
border-width:2px;
border-color:black;
/*padding:12px 25px;*/
padding: 2% 5.5% 2% 5%;
}
#maintitle {
position:absolute;
font-family:"Roboto Condensed", sans-serif;
font-style:italic;
font-weight: 700;
color: black;
text-shadow: 0px 3px 0px #b2a98f,
0px 14px 10px rgba(0,0,0,0.15),
0px 24px 2px rgba(0,0,0,0.1),
0px 34px 30px rgba(0,0,0,0.1);
word-wrap:break-word;
font-size:50px;
width:500px;
text-align: center;
flex:1;
}
/* All media break-points: https://responsivedesign.is/develop/browser-feature-support/media-queries-for-common-device-breakpoints */
@media only screen and (max-device-width : 480px) {
/* Styles */
#maintitle {
font-size:30px;
width:200px;
}
}<!DOCTYPE html>
<html lang = "en">
<head>
<!-- http://getbootstrap.com/ -->
<link href="/css/bootstrap.min.css" rel="stylesheet"/>
<meta charset = "utf-8">
<meta name="viewport" content = "width=device-width, initial-scale = 1">
<link href="/css/welcome.css?parameter=2" rel="stylesheet"/>
<title>History Maps</title>
<!-- https://jquery.com/ -->
<script src="/js/jquery-1.11.3.min.js"></script>
<!-- http://getbootstrap.com/ -->
<script src="/js/bootstrap.min.js"></script>
</head>
<body>
<div class = "container-fluid" style = "border:solid;">
<div class = "row" style = "margin-top:5%">
<div class = "col-md-offset-3 col-md-6 col-xs-offset-1 col-xs-10" >
<!--
<img id = "titleframe" src="../img/pages/frame4.3.jpg" class="img-fluid" alt="Responsive image" style = "height:auto; max-width:100%;">
<img id ="titlepaper" src="img/pages/paper.jpg" class="img-fluid">-->
<div id = "titleframe">
<img id ="titlepaper" class = "img-fluid" src="img/pages/paper.jpg">
<font id="maintitle">History Maps</font>
</div>
<!--<div class = "container-fluid" id = "test"></div>-->
</div>
</div>
</div>
</body>
</html>
如果有人能够理解为什么Chrome到Safari的字体居中行为如此不同，我将非常感谢知道原因。
亲切的问候
答案 0 :(得分：1)
尝试从position: absolute;删除#maintitle或将其更改为relative。
/* Parent elements */
html,body {
height:100%;
}
/* Sets the container-fluid, row and column classes to 100% of the html and body elements */
.container-fluid,.row, .col-md-6, .col-xs-10 {
height:100%;
}
#titleframe {
position:relative;
display:-webkit-box;
display:-ms-flexbox;
display:flex;/* Flex-box ensures font is centered both vertically and horizontally within the title frame using align-items and justify-content. See http://stackoverflow.com/questions/5703552/css-center-text-horizontal-and-vertical-inside-a-div-block */
-webkit-box-align:center;
-ms-flex-align:center;
align-items:center;
-webkit-box-pack:center;
-ms-flex-pack:center;
justify-content:center;
max-width:100%; /* max-width ensures background does not stretch outside container div */
height:15%; /* Represents height relative to parent elements - in this case .container-fluid,.row, .col-md-6, .col-xs-10 which are all set to 100% */
border-style:solid;
border-width:2px;
border-color:black;
background: url("../img/pages/frame4.3.jpg");
background-size: 100% 100%; /* Sets background image to fill 100% of container in both x and y directions. See: http://stackoverflow.com/questions/15160764/background-image-stretch-y-axis-only-keep-repeat-x */
background-repeat:no-repeat;
}
#titlepaper {
position:absolute;
top:0px;
left:0px;
right:0px;
bottom:0px;
width:100%;
height:100%;
border-style:solid;
border-width:2px;
border-color:black;
/*padding:12px 25px;*/
padding: 2% 5.5% 2% 5%;
}
#maintitle {
position:relative;
font-family:"Roboto Condensed", sans-serif;
font-style:italic;
font-weight: 700;
color: black;
text-shadow: 0px 3px 0px #b2a98f,
0px 14px 10px rgba(0,0,0,0.15),
0px 24px 2px rgba(0,0,0,0.1),
0px 34px 30px rgba(0,0,0,0.1);
word-wrap:break-word;
font-size:50px;
width:500px;
text-align: center;
flex:1;
}
/* All media break-points: https://responsivedesign.is/develop/browser-feature-support/media-queries-for-common-device-breakpoints */
@media only screen and (max-device-width : 480px) {
/* Styles */
#maintitle {
font-size:30px;
width:200px;
}
}<div class = "container-fluid" style = "border:solid;">
<div class = "row" style = "margin-top:5%">
<div class = "col-md-offset-3 col-md-6 col-xs-offset-1 col-xs-10" >
<!--
<img id = "titleframe" src="../img/pages/frame4.3.jpg" class="img-fluid" alt="Responsive image" style = "height:auto; max-width:100%;">
<img id ="titlepaper" src="img/pages/paper.jpg" class="img-fluid">-->
<div id = "titleframe">
<img id ="titlepaper" class = "img-fluid" src="img/pages/paper.jpg">
<font id="maintitle">History Maps</font>
</div>
<!--<div class = "container-fluid" id = "test"></div>-->
</div>
</div>
</div>