首页 > 代码库 > 如何用css让一个容器水平垂直居中

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

2024-08-11 10:48:26   210人阅读

 
 
 
 
 
直接上代码：
 
 
<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>demo</title>    </head>    <body>        <style type="text/css">            .div1{  width: 100px; height: 100px; border: 1px solid #000000;}             .div2{ width:40px ; height: 40px; background-color: green;}        </style>                <div class="div1">            <div class="div2">                            </div>        </div>            </body></html>

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

技术分享

前来面试的朋友大多数回答都不那么正确，笔者在这里给大家做一个详细的介绍

1. 我们可以使用margin来达到这个效果

?
1
.div2{ width:40px ; height: 40px; background-color: green; margin-top: 30px; margin-left: 30px;}

--------我们需要将div2的margin-left、margin-top值设置为父容器宽度的二分之一 减去 自身宽度的二分之一 这里的父容器是div1

它的宽度是100px ； div2的宽度是40px 由此得出 margin-top: 30px; margin-left: 30px; div2也就居中了； 效果如下图

技术分享

2.利用绝对定位 position：absolute 配合margin的auto属性 来达到居中的效果 我们可以将css修改为

.div1{  width: 100px; height: 100px; border: 1px solid #000000; position: relative;} .div2{ width:40px ; height: 40px; background-color: green; position: absolute; margin: auto; left: 0; top: 0; right: 0; bottom: 0;}

--------将div2设置为相对div1的绝对定位，margin设为四边auto left、top、bottom、right设为0 浏览器会对绝对定位的容器margin：auto自动识别，

最后得到类似于margin：0 auto的效果；

而我们也可以将left、top、bottom、right设为你想要的值 让div2可以在div1中的任意位置，只是定位的原点被margin：auto移动在div2的左上角；例如：

.div2{ width:40px ; height: 40px; background-color: green; position: absolute; margin: auto; left: 0; top: -30px; right: 0; bottom: 0;}

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

技术分享

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

不绝对定位也可以这样写：

<style type="text/css">

.div1{ width: 100px; height: 100px; border: 1px solid #000000; vertical-align:middle;display:table-cell;}
.div2{ width:40px ; margin:0 auto; }
</style>

<div id="div1" class="div1">
<div id="div2" class="div2">
这是一段文字
</div>
</div>

说明

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

  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; 样式渲染的规定，所以应当在与标准兼容的各种浏览器中起作用。

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


联系
我们