将盒子水平和垂直居中

页面主体结构整体html结构

css结构*{margin:0;填充：0；}html,body{宽度:100%;高度：100%；}文章{宽度：100%；高度：100%；}div{宽度：200px；高度：150px；背景颜色：天蓝色；}使盒子水平居中margindiv{margin:0auto;}text-alignarticle{text-align:center;}div{显示：内联块；}(缺点：文章里面的文字也会水平居中，需要消除影响)框垂直居中transformdiv{position:absolute;顶部：50%；变换：翻译Y(-50%)；/*如果你知道div的高度，你可以使用下面的方法代替上面的行*//*margin-top:-75px;*/}盒子水平垂直居中flexlayoutarticle{display:flex;证明内容：居中；对齐项目：居中；}grid布局文章{display:grid;网格模板行：1fr150px1fr；网格模板列：1fr200px1fr；}div{网格区域：2/2/3/3;}绝对定位div{position:absolute;顶部：50%；左：50%；转换：翻译（-50%，-50%）；}