水平垂直居中方法

时间：2023-04-03 00:11:35 HTML

注意：如果容器没有设置宽高，需要设置html,body{width:100%;高度：100%；margin:0;}方法一：四个方向绝对定位为0+margin:auto;.box{背景颜色：海蓝宝石；位置：相对；高度：500px；}.content{背景颜色：#ffff00;保证金：自动；位置：绝对；顶部：0；左：0；底部：0；右：0；高度：50%；宽度：50%；}

注意：该方法需要父子元素声明高度！！可选宽度（块级元素默认为100%）可以支持百分比%宽度和高度。兼容IE8+方法二：绝对定位50%+负margin值为自身宽高的一半.box2{background-color:rgb(236,255,127);位置：相对；高度：500px；}.content2{背景色：#00ff9d；宽度：50%；高度：200px；位置：绝对；顶部：50%；左：50%；边距顶部：-100px；左边距：-25%；}

注意：不支持百分比尺寸！！！子元素高度不支持百分比！！可用宽度？兼容IE6-IE7方法三：绝对定位50%+transform:translate(-50%,-50%);.box3{背景色：rgb(236,255,127);位置：相对；高度：500px；}.content3{背景颜色：#00ff9d；宽度：50%；高度：50%；位置：绝对；顶部：50%；左：50%；转换：翻译（-50%，-50%）；}注意：子元素的宽高可以支持百分比！！与方法2原理类似，将负边距改为transform：translate(-50%,-50%);方法四：flexbox----flex.box4{background-color:rgb(0,255,127);高度：600px；显示：弹性；证明内容：居中；对齐项目：居中；}.content4{背景颜色：#e139e7；宽度：50%；高度：50%；}注：父元素设置：display:flex;证明内容：居中；对齐项目：居中；只需设置子元素的宽度和高度。如果有更多更好的方法，欢迎大家补充和建议！

上一篇：解决Highcharts中yAxis的max设置无效的问题

下一篇：记录最近的一些前端面试题

水平垂直居中方法相关文章