Question

我正面临一个问题，如何将div中的文本（h1）居中。我希望网页是全屏的，我用vh单位实现了这一点。

.page { height: 100vh; 
        width: 100%;}

在该页面上，我希望div水平和垂直居中。我试过

.div { top: 50%;
      left: 50%;}

但这并没有成功。我也希望这是＆＃34; resposive＆＃34;它以任何屏幕为中心。我希望建立这样的东西：http://www.anthonygoodisondesign.com/

Answer 1

使用如下的css代码;

＆＃13;

div{height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  }

＆＃13;

<div>  <h1>center me</h1></div>

＆＃13;

Answer 2

使用此：

text-align: center;
position: relative;
top: 40vh;
transform: translateY(-50%);