当前位置:Gxlcms > html代码 > 内嵌盒子定位和居中问题,在缩放浏览器情况下,不会影响盒子的布局_html/css_WEB-ITnose

内嵌盒子定位和居中问题,在缩放浏览器情况下,不会影响盒子的布局_html/css_WEB-ITnose

时间:2021-07-01 10:21:17 帮助过:55人阅读

问题描述:第一眼我们看到上图,可能就想到用浮动来布局,但是在用浏览器调试缩放时“您好中国”盒子会自然成列。那么怎么让他们自适应,让好和中之间始终处于浏览器中间位置?

        Document    

本案例应用到知识点:相对定位、绝对定位;盒子的居中
现在就居中问题做下总结:

1、左右居中:

给盒子absolute定位,父盒子relative,left=50%;让盒子移动, Margin-left: -自身宽度一半。

2、垂直居中:

给盒子absolute定位,父盒子relative,top=50%;让盒子移动, Margin-top: -自身高度一半。

人气教程排行