居中显示div,水平和垂直都居中

如下图效果:

微信截图_20230223144053.png

<!DOCTYPE html>    
<html>    
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    
<head>    
<title>MOSS</title>    
<style>    
body {    
    background-color: #fff;    
    color: #222;    
    display: flex;    
    flex-direction: column;    
    align-items: center;    
    justify-content: center;    
    height: 100vh;    
    margin: 0;    
}    
img {    
    max-width: 100%;    
    max-height: 50px;    
}    
h1 {    
    margin-top: 40px;    
}    
</style>    
</head>    
<body>    
    <img src="logo.png" alt="Logo" />    
    <h1>为保证用户体验,MOSS 需要进行升级,现已停止服务</h1>    
</body>    
</html>


复制内容


评论


乖,登录后才可以留言! 登录

Copyright © 2020-2023 春藤技术,春藤建站 All Rights Reserved
备案号:豫ICP备20020705号 公网安备 51LA统计