html中水平和垂直居中的几种方法（基础）

时间：2023-04-02 13:35:39 HTML

前言我们在写马的时候，我想你对水平和垂直居中的方法了解不多。所以我给大家总结几种常用的水平居中和垂直居中的方法。第一种方法

dfirst

.Centered1{背景颜色：#800070；宽度：100%；高度：500px；位置：相对；}.Centered1p{宽度：200px；高度：200px；背景色：深粉色；行高：200px；文本对齐：居中；位置：绝对；左：0；底部：0；右：0；顶部：0；保证金：自动；}第二种方法

d第二种方法

/*第二种方式水平垂直居中*/.Centered2{background-color:#ef8518;宽度：100%；高度：500px；位置：相对；}.Centered2p{位置：绝对；宽度：200px；高度：200px；背景颜色：红色；行高：200px；文本对齐：居中；左：50%；顶部：50%；左边距：-100px；边距顶部：-100px；方法

d第三

/*第三种方式水平垂直居中*/.Centered3{background-color:dimgrey;宽度：100%；高度：500px；位置：相对；}.Centered3p{位置：绝对；宽度：200px；高度：200px；背景颜色：深橙色；行高：200px；文本对齐：居中；左：50%；顶部：50%；变换：翻译（-50%，-50%）；}第四种方法

d第四