首页 > 技术文章 > CSS - div居中在屏幕中(水平居中 + 垂直居中)

allen2333 2019-03-11 15:31 原文

方法一代码

<div>
    <h1>404 Not Found.</h1>
</div>

<style>
    div {
        text-align: center;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }
</style>

在新Tab打开

方法二代码

.vertical-container {
  height: 300px;
  display: -webkit-flex;
  display:         flex;
  -webkit-align-items: center;
          align-items: center;
  -webkit-justify-content: center;
          justify-content: center;
}

推荐阅读