<!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:; top:; right:; bottom:;}

--------将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:; top: -30px; right:; bottom:;}

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

#27楼2016-03-08 10:32 | Stealer

 
#28楼 2016-03-08 10:34 | BZindex
 
 
另外贴一个方法二更详细的介绍  
 

说明

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

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

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

公司的一个面试题：如何用css让一个容器水平垂直居中？的更多相关文章

  1. 【CSS】如何用css做一个爱心

    摘要:HTML的标签都比较简单,入门非常的迅速,但是CSS是一个需要我们深度挖掘的东西,里面的很多样式属性掌握几个常用的便可以实现很好看的效果,下面我便教大家如何用CSS做一个爱心. 前期预备知识: ...

  2. 如何用css实现一个三角形？

    昨天被人问到说如何用css实现一个三角形?em....  当时被问到了,汗颜,今天找了一些帖子看了一下,也算是记录一下吧 代码如下: 实现效果:

  3. 如何用css做一个爱心

    摘要:HTML的标签都比较简单,入门非常的迅速,但是CSS是一个需要我们深度挖掘的东西,里面的很多样式属性掌握几个常用的便可以实现很好看的效果,下面我便教大家如何用CSS做一个爱心. 前期预备知识: ...

  4. css知识笔记：水平垂直居中（别只看，请实操！！！）

    css实现元素的水平垂直居中. (尝试采用5W2H方法说明): 别只看,请实操!!! What: 1.这篇文档主要描述元素水平方向居中的几种最常见和最实用的几种方式,并说明优缺点. 2.写这篇文章的目 ...

  5. CSS布局中的水平垂直居中

    CSS布局中的水平垂直居中 各位好,先说两句题外话.今天是我开通博客园的博客第一天,虽然我申请博客园的账号已经有一年半了,但是由于各种原因迟迟没有开通自己的博客.今天非常有幸开通博客,在此也写一篇关于 ...

  6. CSS布局：元素水平垂直居中

    CSS布局:元素水平垂直居中 本文将依次介绍在不同条件下实现水平垂直居中的多种方法 水平垂直居中是在写网页时经常会用到的需求,在上两篇博客中,分别介绍了水平居中和垂直居中的方法.本文的水平垂直居中就是 ...

  7. 用css让一个容器水平垂直居中

    阅读目录 方法一:position加margin 方法二: diaplay:table-cell 方法三:position加 transform 方法四:flex;align-items: cente ...

  8. css定位“十字架“之水平垂直居中

    1.先看要实现的效果 实际的效果图 可以看到我的实现过程是先使用一个父级的div来定位水平垂直居中,然后再父级的div中定位出两个十字架的div. 看实现代码: <!DOCTYPE HTML P ...

  9. 使用CSS定位元素实现水平垂直居中效果

    总结一下平时使用CSS技巧使元素达到水平居中效果 相对定位(或绝对定位)实现水平垂直居中: element{ position:relative; /*这个属性也可以是absolute*/ width ...

  10. css实现未知高度水平垂直居中

    页面设计中,经常需要实现元素的水平垂直居中,css实现的方法有很多(列如: margin: auto.position定位.css表达式calc().使用css预处理.table等都可以实现水平居中) ...

随机推荐

  1. 学习笔记： Delphi之线程类TThread

    新的公司接手的第一份工作就是一个多线程计算的小系统.也幸亏最近对线程有了一些学习,这次一接手就起到了作用.但是在实际的开发过程中还是发现了许多的问题,比如挂起与终止的概念都没有弄明白,导致浪费许多的时 ...

  2. 解读ASP.NET 5 & MVC6系列（4）：核心技术与环境配置

    asp.net 5是下一代的asp.net,该版本进行了全部重写以适用于跨平台,新新版本中,微软引入了如下工具与命令:DNVM.DNX.DNU. DNVM(.NET Version Manager): ...

  3. Web应用程序的自动化测试库-FluentAutomation

    FluentAutomation是流畅的自动化应用编程接口,支持Selenium和WatiN 连同它们所有的风格和驱动程序.自从Fluient支持Selenium,那就意味着你可以使用Selenium ...

  4. SQL Server 深入解析索引存储(上)

    标签:SQL SERVER/MSSQL SERVER/数据库/DBA/索引体系结构/堆/聚集索引 概述 最近要分享一个课件就重新把这块知识整理了一遍出来,篇幅有点长,想要理解的透彻还是要上机实践. 聚 ...

  5. 《Entity Framework 6 Recipes》中文翻译系列 (42) ------ 第八章 POCO之使用POCO

    翻译的初衷以及为什么选择<Entity Framework 6 Recipes>来学习,请看本系列开篇 第八章 POCO 对象不应该知道如何保存它们,加载它们或者过滤它们.这是软件开发中熟 ...

  6. 浅谈微信小程序对于创业者，意味着什么？

    尽管这个话题,有点儿烂大街,然而作为开发者兼创业人,兹以为很有必要为自己梳理一番. 多年前,当萌生创业的念头时,我是这样在脑海里绘制这幅蓝图的: 我需要一个域名,一个服务器,并且备了案. 我需要至少一 ...

  7. 考勤系统——代码分析datagrid

    datagrid是easyui的控件,DataGrid以表格形式展示数据,并提供了丰富的选择.排序.分组和编辑数据的功能支持.DataGrid的设计用于缩短开发时间,并且使开发人员不需要具备特定的知识 ...

  8. 在drawable 画胶囊状

    <solid android:color="@color/colorAccent"></solid> <corners android:radius= ...

  9. AngularJS移动开发中的各种坑

    捂脸,辛酸泪ing...... 本文主要涉及部分在移动设备上特有的问题. 相对来说,Jquery侧重DOM操作,AngularJS是以视图模型和双向绑定为核心的. DOM操作的问题 避免使用 jQue ...

  10. 解密jQuery内核 DOM操作的核心函数domManip

    domManip是什么 dom即Dom元素,Manip是Manipulate的缩写,连在一起就是Dom操作的意思. .domManip()是jQuery DOM操作的核心函数 对封装的节点操作做了参数 ...