center h1 in the middle of screen

This question already has an answer here:

How do I vertically center text with CSS? 34 answers

---

您可以使用display flex为其所有直接子项创建一个flex上下文，并使用flex方向建立主轴，从而定义flex项目放置在flex容器中的方向

div{
  height: 400px;
  width: 800px;
  background: red;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

---

Just do this, which works on every browser:

div{
     height: 400px;
     width: 800px;
     background: red;
     line-height: 400px;
     text-align: center;
}

The line-height property specifies the line height (which centres it vertically), and the text-align:center place it directly in the centre horizontally.

---

<div>
  <style>
div {
  position: fixed;
  top: 50%;
  left: 50%;
}</style>
<h1>This is title</h1>
</div>

With position: fixed you set the position to a fixed value, and with top and left both set to 50% you'll get it in the middle of the screen.

Good luck coding!

Here is some more information: https://css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center/

链接地址: http://www.djcxy.com/p/41656.html

上一篇: 我怎样才能对齐到中间高度

下一篇: 屏幕中间的中心h1