开发者社区> 杰克.陈> 正文

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

简介: 原文:公司的一个面试题:如何用css让一个容器水平垂直居中? DOCTYPE html> demo .
+关注继续查看
原文:公司的一个面试题:如何用css让一个容器水平垂直居中?

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

 最后谢谢大家;也感谢大家指正

 

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
【复习】CSS实现宽高等比自适应容器
【复习】CSS实现宽高等比自适应容器
58 0
用纯 CSS 创作一个在容器中反弹的小球
效果预览 在线演示 按下右侧的“点击预览”按钮可以在当前页面预览,点击链接可以全屏预览。 https://codepen.io/comehope/pen/jKVbyE 可交互视频教程 此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。
749 0
如何用纯 CSS 创作一个容器厚条纹边框特效
效果预览 在线演示 按下右侧的“点击预览”按钮在当前页面预览,点击链接全屏预览。 https://codepen.io/zhang-ou/pen/YLqbXy 可交互视频教程 此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。
1060 0
css体验优化之图片容器设置宽高比
需求 我们在做web页面的时候,经常会有一些图片列表,例如下图的视频列表以及表情列表:        需求要求: 1. 列表是responsive的,在不同宽度的浏览器下面,图片要自适应容器宽度 2.
1238 0
公司的一个面试题:如何用css让一个容器水平垂直居中?
DOCTYPE html> demo .div1{ width: 100px; height: 100px; border: 1px solid #000000;} .
907 0
纯CSS实现下拉菜单及下拉容器等(纯CSS实现导航条及导航下拉容器)
原文:纯CSS实现下拉菜单及下拉容器等(纯CSS实现导航条及导航下拉容器)  虽然网上类似甚至相同的案例有很多,但是我还是写下,以记下笔记,也可供大家参考 希望大家可以指导批评~~ 首先我们以列表ul li 来开始我们菜单也可以说导航条的制作: 在页面中我们首先构建以下XHTML结构: ...
1045 0
只用CSS实现容器内图片上下左右居中
原文 只用CSS实现容器内图片上下左右居中  一直以来,大家都知道,DIV容器内设置 text-align:center 即可让图片居中,但是DIV内默认的图片是上对齐,不会上下居中,如果想要实现这样的效果,JS判断是比较麻烦的,因为DIV容器内的图片高度是不一定的,那么只有用table了,我想大...
1124 0
远离JS灾难css灾难之 js私有函数和css选择器作为容器
当一个项目庞大到一定阶段,例如UI展示层采用了模块化模板化之后,就会出现js灾难,css灾难,经常出现以前从来不放在一起的两个js或css莫名奇妙的被放到了一个页面,基本的原因是模块重用造成的     尽管js可以想面向对象那样去构造对象,隐藏私有方法,但需求变化的往往比你写程序还要快时,就连...
726 0
下一代容器工具 Podman 与 Docker 的比较
`Podman` 与 `Docker` 最大的差别之一,`Podman` 是一种无守护程序的容器引擎,它控制下的容器既可以由 `root` 用户运行,也可以由非特权用户运行,而 Docker 控制下的容器只能由 `root` 用户运行。
46 0
+关注
杰克.陈
一个安静的程序猿~
文章
问答
文章排行榜
最热
最新
相关电子书
更多
零基础CSS入门教程
立即下载
云原生架构容器&微服务优秀案例集
立即下载
0225微服务x容器开源开发者MeetupPPT合辑
立即下载