Question

 <html>
  <head>
  <h1>Hello.</h1>
  </head>
  <link rel="stylesheet" type="text/css" href="butters.css">
  <link href="https://fonts.googleapis.com/css?family=Galada" rel="stylesheet">
  <body></body>
</html>

+

h1{
   font-family: 'Galada', cursive;
   font-size: 400%;
   position: relative;
   top: 50%;
   left: 50%;
   transform: translateY(-50%);
}

Link to fiddle. I pretty much followed this tutorial.

我发现它有问题，因为它创建了一个我不想要的水平滚动条，我不相信它是水平居中的。我只是想让它在屏幕中间轻拍，无论屏幕大小如何，但我不确定它会采取什么样的CSS来做到这一点。

Answer 1

我改变了你的CSS：

h1{
   font-family: 'Galada', cursive;
   font-size: 70px;
   transform: translate(-50%,-50%);
   position: absolute;
   top: calc(50% - 35px);
   left: 50%;   
}

Answer 2

尝试改变位置：相对于位置：绝对

Answer 3

两件事 - 首先，你头上有一个h1，这是无效的，你会想把它移到你的身体上。从那里，你需要给50％的身体定位参考。它还需要获得位置：绝对左侧和顶部才能正常工作。之后，您可以同时执行translateX和translateY以使其在两个轴上居中。以下示例！

h1{
   font-family: 'Galada', cursive;
   font-size: 400%;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translateY(-50%) translateX(-50%);
}
body{
  width: 100%;
  position: relative;
}

https://jsfiddle.net/will0220/pw4j2m36/1/

Answer 4

H1应该在BODY中。它不是有效的HEAD元素。

垂直居中也取决于容器的高度。

使用：

html,body {
 height:100%;
}

http://www.codeply.com/go/u9kxrMCzK8

Answer 5

您需要将 top 替换为 margin-top 以获取相关元素：

h1{
   font-family: 'Galada', cursive;
   font-size: 400%;
   position: relative;
   margin-top: 50%;
   left: 50%;
   transform: translateY(-50%);
}

  <h1>Hello.</h1>

Answer 6

The easiest way to align text horizontally is "text-align: center", if You know vertical height, You can align vertically with "line-height: (value)px"

HTML
<body>
    <h1>Hello.</h1>
</body>

CSS
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

h1 {
  font-family: 'Galada', cursive;
  font-size: 400%;
  text-align: center;
  margin-top: 50%;
}

如何在CSS中纵向和横向居中标题？

6 个答案: