微信号:FrontDev

介绍:分享 Web 前端相关的技术文章、工具资源、精选课程、热点资讯

公司的一个面试题:如何用CSS让一个容器水平垂直居中?

2016-09-07 21:11 前端大全

(点击上方公众号,可快速关注)


来自:张泰峰 - 博客园

链接:www.cnblogs.com/ztfjs/p/5250405.html

<!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来达到这个效果

.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 ; 而这一步是没有必要的;




 ---------------非常感谢下面的博友的评论------------------------


改了一下,这样可以实现任意div2高度的,不用绝对定位。 

<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>


 

另外贴一个方法二更详细的介绍  

说明

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


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


原文章地址:http://codepen.io/shshaw/full/gEiDt




------------------ 推荐 ------------------


范品社推出了十几款程序员、电影、美剧和物理题材的极客T恤单件 ¥59.9、两件减¥12、四件减¥28,详见网店商品页介绍。


网店地址:https://fanpinshe.taobao.com/

淘口令:复制以下红色内容,然后打开手淘即可购买

范品社,使用¥极客T恤¥抢先预览(长按复制整段文案,打开手机淘宝即可进入活动内容)

 
前端大全 更多文章 互联网风口,等你来战! 如何打造一个令人愉悦的前端开发环境(一) 如何打造一个令人愉悦的前端开发环境(二) 为什么要用 Node.js 程序员节来了!你是如何入门前端开发的?
猜您喜欢 微粒贷 - 微信的金融征途开始啦 冬至 —— 你咋过的? 腾讯游戏开发者平台校园行-四川电子科技大学站开启 架构师必知10大移动Web开发框架 如何学好编程---四步成为编程精英