博客建设 ·

如何用css让一个容器水平垂直居中?

问题:如何让class为div2的内部容器上下左右居中?

前来面试的朋友大多数回答都不那么正确,笔者在这里给大家做一个详细的介绍1. 我们可以使用margin来达到这个效果

--------我们需要将div2的margin-left、margin-top值设置为父容器宽度的二分之一减去自身宽度的二分之一,这里的父容器是div1它的宽度是100px;div2的宽度是40px;由此得出:

div2也就居中了; 效果如下图2.利用绝对定位 position:absolute 配合margin的auto属性 来达到居中的效果  我们可以将css修改为

--------将div2设置为相对div1的绝对定位,margin设为四边auto left、top、bottom、right设为0,浏览器会对绝对定位的容器margin:auto自动识别,最后得到类似于margin:0 auto的效果;而我们也可以将left、top、bottom、right设为你想要的值 让div2可以在div1中的任意位置,只是定位的原点被margin:auto移动在div2的左上角;例如:

此时div2的位置在垂直居中的-30px的地方;

3.不用绝对定位,这样也可以实现任意div2高度

总结:在我们的网页中,经常会遇到这样的需求 弹窗的居中,图片的居中,很多童鞋采用js算法动态设置left、top ; 而这一步是没有必要的;

在研究了规范和文档后,我总结出了“完全居中”的工作原理:

1、在普通文档流里,margin: auto; 的意思是设置元素的margin-top和margin-bottom为0。W3.org:If ‘margin-top’, or ‘margin-bottom’ are ‘auto’, their used value is 0.

2. 设置了position: absolute; 的元素会变成块元素,并脱离普通文档流。而文档的其余部分照常渲染,元素像是不在原来的位置一样。Developer.mozilla.org:…an element that is positioned absolutely is taken out of the flow and thus takes up no space

3.、设置了top: 0; left: 0; bottom: 0; right: 0; 样式的块元素会让浏览器为它包裹一层新的盒子,因此这个元素会填满它相对父元素的内部空间,这个相对父元素可以是是body标签,或者是一个设置了 position: relative; 样式的容器。Developer.mozilla.org:For absolutely positioned elements, the top, right, bottom, and left properties specify offsets from the edge of the element’s containing block (what the element is positioned relative to).

4.、给元素设置了宽高以后,浏览器会阻止元素填满所有的空间,根据margin: auto; 的要求,重新计算,并包裹一层新的盒子。Developer.mozilla.org:The margin of the [absolutely positioned] element is then positioned inside these offsets.

5、 既然块元素是绝对定位的,又脱离了普通文档流,因此浏览器在包裹盒子之前会给margin-top和margin-bottom设置一个相等的值。W3.org:If none of the three [top, bottom, height] are ‘auto’: If both ‘margin-top’ and ‘margin-bottom’ are ‘auto’, solve the equation under the extra constraint that the two margins get equal values.?AKA: center the block vertically使用“完全居中”,有意遵照了标准margin: auto; 样式渲染的规定,所以应当在与标准兼容的各种浏览器中起作用。

参与评论