我不明白为什么在 headings 、 paragraph 、 span 等容器元素内似乎不可能垂直居中 .. 在移动版 Chrome 中使用某些字体。似乎在移动版 Firefox 中效果更好。 一个例子 : Open-Sans 适用于 Firefox 移动版和 Chrome 移动版。例如，使用字体系列 Raleway 垂直居中似乎仅适用于 Firefox 移动版。
#x-wrapper {
position:absolute;
left:100px;
font-family:'Open Sans',sans-serif;font-weight:400;
}
#y-wrapper {
position:absolute;
left:200px;
font-family:'Oswald',sans-serif;font-weight:400;
}
.circle {
width:50px;
height:50px;
border:1px black solid;
border-radius:25px;
}
.hello{
position:relative;
height:100%;
width:100%;
}
.hello h5 {
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
margin:0px;<!DOCTYPE html>
<head>
<link href='https://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="x-wrapper" class="circle">
<div class="hello">
<h5>hello</h5>
</div>
</div>
<div id="y-wrapper" class="circle">
<div class="hello">
<h5>hello</h5>
</div>
</div>
</body>
</html>最佳答案
我会发表评论来提问，但还没有足够的代表:/
你试过这样的事情吗:
.circle {
display: flex;
align-items: center;
justify-content: center;
}
关于html - 垂直居中似乎不适用于 Chrome 移动版中的某些字体，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35846819/