html中怎么让div居中
发表于:2024-11-14 作者:千家信息网编辑
千家信息网最后更新 2024年11月14日,这篇文章主要介绍了html中怎么让div居中的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇html中怎么让div居中文章都会有所收获,下面我们一起来看看吧。margin方
千家信息网最后更新 2024年11月14日html中怎么让div居中
这篇文章主要介绍了html中怎么让div居中的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇html中怎么让div居中文章都会有所收获,下面我们一起来看看吧。
margin方法
可以通过margin来使得div居中,通过给margin-left设置的值为父元素的宽减去子元素的宽再除以2(本例中:(400-100)/2=150px),margin-top的值为父元素的高度减去子元素的高度值再除以2(本例中:(300-100)/2=100px)
例:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | .box{ width:400px; height: 300px; border: 1px solid #ccc; } .box1{ width:100px; height: 100px; background-color: pink; margin-left: 150px; margin-top:100px; } |