div页面垂直和水平居中布局方式

div页面垂直和水平居中布局方式
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>管理员登录</title>
    <link rel="stylesheet" href="/static/layui/css/layui.css"/>
    <style>
        html, body {
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
        #parentContainer {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        #childContainer {
            width:400px;height:300px;
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            margin: auto;
        }
    </style>
</head>
<body>
<div id="parentContainer">
    <div id="childContainer">
        <div class="layui-form" lay-filter="loginForm" id="loginForm">
            <div class="layui-form-item"><h1 class="logo-title">项目信息管理</h1></div>
            <div class="layui-form-item">
                <div class="layui-input-wrap">
                    <div class="layui-input-prefix">
                        <i class="layui-icon layui-icon-username"></i>
                    </div>
                    <input type="text" name="iphone" id="iphone" value="" lay-verify="required|phone"
                           placeholder="登录手机号"
                           lay-reqtext="请填写登录手机号" autocomplete="off" class="layui-input" lay-affix="clear">
        ...
该文章为易网时代-编程资源站会员专属文章，请先登录后再进行查看。