Question

我试图创建一个相当简单的网站，其中包含一些内部有文字的div，在页面上水平和垂直居中。

我不会想到这会很难做到，但有些事情很奇怪。这是确实起作用的来源。让我们称之为来源A.

<link rel="stylesheet" href="styles.css">
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans" rel="stylesheet">

<!DOCTYPE html>
<html>
  <head> 
    <meta charset="utf-8">
    <title>Jacob Garby</title>
  </head>
  <body>
    <div class="wrap">
      <div class="content">Test</div>
    </div>
  </body>
</html>

这是无法工作的来源。让我们称之为来源B.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Jacob Garby</title>
    <link rel="stylesheet" href="styles.css">
    <link href="https://fonts.googleapis.com/css?family=Josefin+Sans" rel="stylesheet">
  </head>
  <body>
    <div class="wrap">
      <div class="content">Test</div>
    </div>
  </body>
</html>

它们都使用相同的样式表，即：

* {
  font-family: 'Josefin Sans';
  margin: 0;
  padding: 0;
}

div.wrap {
  display:flex;
  justify-content:center;
  align-items:center;
  width:100%;
  height:100%;
}

div.content {
  border: 1px solid red;
  text-align: center;
  width: 100%;
}

问题是当我链接到html head标签的外的样式表时，div.wrap只是垂直对齐。这是唯一的区别有效的来源和没有的来源。

我知道你的意思是将源代码包含在head标签中，这就是为什么我觉得它很奇怪，只有才能正常工作与此相反。

我会在jsfiddle或其他内容中包含一些链接，但问题在于我是如何包含样式表的，jsfiddle并没有让我改变。

我已经在我拥有的所有浏览器（Opera，Firefox和Chrome）上尝试过此操作，但问题仍然存在。

这是某种HTML错误吗？还是我犯了一些明显的错误？

以下是一些截图。

来源A：

来源B：

我在网络浏览器中查看了源代码，即使我链接到头部以外的样式表，它似乎也把它放在那里。因此，在两个示例中，实际查看时，样式表将自动放入头标记中。

如果我的问题不清楚，那基本上就是这样：

为什么会发生这种奇怪的行为，我该如何解决？

Answer 1

这并不奇怪，但是你的HTML在A中这样做是无效的。

Browsers are required to do the best they can with invalid markup.当然，问题在于你依靠浏览器正确猜测你的意图，所以不要写无效的标记。

如果样式是否在html head标记内，样式的工作方式会有所不同？

1 个答案: