面试笔记（五）---盒子居中

最新推荐文章于 2022-03-02 12:03:52 发布
最新推荐文章于 2022-03-02 12:03:52 发布
阅读量220 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41370424/article/details/81225351
版权

 

布局中经常会遇到让一个盒子水平且垂直居中的情况，以下总结了几种居中方法：

  1. margin固定宽高居中
  2. 负margin居中
  3. 绝对定位居中
  4. table-cell居中
  5. flex居中
  6. transform居中
  7. 不确定宽高居中（绝对定位百分数）
  8. button居中

不兼容IE低版本的可以用其他方法hack。

不多说，直接上代码：
大多数方法的html都相同，所以写一个了，不同的再单独写出来。

（demo中有代码和效果）

HTML:

<body>

    <div id="container">

        <div id="box"></div>

    </div>

</body>

  • margin固定宽高居中

这种定位方法，纯粹是靠宽高和margin拼出来的，不灵活。

CSS:

#container {

    width: 600px;

    height: 500px;

    border: 1px solid #000;

    margin: auto;

}

#box {

    width: 200px;

    height: 200px;

    margin: 150px 200px;

    background-color: #0ff;

}

点击查看demo

  • 负margin居中

利用负的margin来进行居中，需要知道固定宽高，限制比较大。

CSS:

#container {

    position: relative;

    width: 600px;

    height: 500px;

    border: 1px solid #000;

    margin: auto;

}

#box {

    position: absolute;

    width: 200px;

    height: 200px;

    left: 50%;

    top: 50%;

    margin: -100px -100px;

    background-color: #0ff;

}

点击查看demo

  • 绝对定位居中

利用绝对定位居中，非常常用的一种方法。

CSS:

#container {

    position: relative;

    width: 600px;

    height: 500px;

    border: 1px solid #000;

    margin: auto;

}

#box {

    position: absolute;

    width: 200px;

    height: 200px;

    left: 0;

    top: 0;

    right: 0;

    bottom: 0;

    margin: auto;

    background-color: #0ff;

}

点击查看demo

  • table-cell居中

利用table-cell来控制垂直居中。

CSS:

#container {

    display: table-cell;

    width: 600px;

    height: 500px;

    vertical-align: middle;

    border: 1px solid #000;

}

#box {

    width: 200px;

    height: 200px;

    margin: 0 auto;

    background-color: #0ff;

}

点击查看demo

  • flex居中

CSS3中引入的新布局方式，比较好用。缺点：IE9以及IE9一下不兼容。

CSS:

#container {

    display: -webkit-flex;

    display: flex;

    -webkit-align-items: center;

            align-items: center;

    -webkit-justify-content: center;

            justify-content: center;

    width: 600px;

    height: 500px;

    border: 1px solid #000;

    margin: auto;

}

#box {

    width: 200px;

    height: 200px;

    background-color: #0ff;

}

点击查看demo

  • transform居中

这种方法灵活运用CSS中transform属性，较为新奇。缺点是IE9下不兼容。

CSS:

#container {

    position: relative;

    width: 600px;

    height: 600px;

    border: 1px solid #000;

    margin: auto;

}

#box {

    position: relative;

    top: 50%;

    left: 50%;

    width: 200px;

    height: 200px;

    transform: translate(-50%, -50%);

    -webkit-transform: translate(-50%, -50%);

    -ms-transform: translate(-50%, -50%);

    -moz-transform: translate(-50%, -50%);

    background-color: #0ff;

}

点击查看demo

  • 不确定宽高居中（绝对定位百分数）

这种不确定宽高的居中，较为灵活。只需要保证left和right的百分数一样就可以实现水平居中，保证top和bottom的百分数一样就可以实现垂直居中。

CSS:

 #container {

    position: relative;

    width: 600px;

    height: 500px;

    border: 1px solid #000;

    margin: auto;

}

#box {

    position: absolute;

    left: 30%;

    right: 30%;

    top: 25%;

    bottom: 25%;

    background-color: #0ff;

}

点击查看demo

  • button居中

利用button做外容器，里边的块元素会自动垂直居中，只需要控制一下水平居中就可以达到效果。

HTML:

<button>

    <div></div>

</button>

CSS:

button {

    width: 600px;

    height: 500px;

    border: 1px solid #000;

}

div {

    width: 200px;

    height: 200px;

    margin: 0 auto;

    background-color: #0ff;

}

说到让一个div水平居中，立马想到最常用的就是margin:0 auto;但是这个的前提是必须知道盒子的宽度，盒子居中主要有两种情况：

一.确定盒子的宽度，解决办法有：

1.1 margin:0 auto;

1.2   position:relative;left:50%;margin-left:-0.5*width;(用绝对定位也可以)

二.不确定盒子宽度的，而且盒子宽度可变的，方法如下

2.1 position:relative:left:50%;transform:translateX(-50%);-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);//这里的50%是指盒子本身的50%;

2.2 width:fit-content;width:-moz-fit-content;width:-webket-fit-content;margin:auto;

1.第一种

利用margin，div1的宽减去div2的宽就是div2margin-left的数值：（100-40）/2=30

div1的高减去div2的高就是div2margin-top的数值：（100-40）/2=30

按 Ctrl+C 复制代码

<!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;}
            .div22{
                margin-left: 30px;margin-top: 30px;
            }
        </style>
        <div class="div1">
            <div class="div2 div22">
            </div>
        </div>
    </body>
</html>

第一种

第2种

利用css的 position属性，把div2相对于div1的top、left都设置为50%，然后再用margin-top设置为div2的高度的负一半拉回来，用marg-left设置为宽度的负一半拉回来，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;}
 
            .div11{
                position: relative;
            }
            .div22{
                position: absolute;top:50%;left: 50%;margin-top: -20px;margin-left: -20px;
            }
        </style>
 
        <div class="div1 div11">
            <div class="div2 div22">
 
            </div>
        </div>
 
    </body>
</html>

第二种

第三种

【】【】还是用css的position属性，如下的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;}
 
            .div11{
                position: relative;
            }
            .div22{
                position: absolute;margin:auto; top: 0;left: 0;right: 0;bottom: 0;
            }
        </style>
 
        <div class="div1 div11">
            <div class="div2 div22">
 
            </div>
        </div>
 
    </body>
</html>

第三种

第四种

利用css3的新增属性table-cell, vertical-align:middle;

<!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;}
 
            .div11{
                display: table-cell;vertical-align: middle;
            }
            .div22{
                margin: auto;
            }
        </style>
 
        <div class="div1 div11">
            <div class="div2 div22">
            </div>
        </div>
 
    </body>
</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 ; background-color: green;}
 
            .div11{
                display: table-cell;vertical-align: middle;
            }
            .div22{
                margin: auto;
            }
        </style>
 
        <div class="div1 div11">
            <div class="div2 div22">
               div居中方法
            </div>
        </div>
 
    </body>
</html>

第五种方法

第六种方法

利用flexbox布局

直接在父元素上使用flexbox的布局

 <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <style type="text/css">
        .div1 {
            width: 100px;
            height: 100px;
            border: 1px solid #000000;
        }
 
        .div2 {
            height: 40px;
            width: 40px;
            background-color: green;
        }
 
        .div11 {
            display: flex;
            /*!*flex-direction: column;*!可写可不写*/
            justify-content: center;
            align-items: center;
        }
 
    </style>
</head>
<body>
 
 
<div class="div1 div11">
    <div class="div2 div22">
 
    </div>
</div>
 
</body>
</html>

第六种方法

第七种方法

利用transform的属性,注意子绝父相定位

缺点：需要支持Html5

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <style type="text/css">
        body {
            margin: 100px auto;
            position: relative;
        }
 
        .div1 {
            width: 100px;
            height: 100px;
            border: 1px solid #000000;
            background-color: red;
        }
 
        .div2 {
            height: 40px;
            width: 40px;
            background-color: green;
        }
 
        .center {
            position: absolute;
            top: 50%;
            left: 50%;
            -ms-transform: translate(-50%, -50%);
            -moz-transform: translate(-50%, -50%);
            -o-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
        }
 
    </style>
</head>
<body>
 
 
<div class="div1 center">
    我是外部盒子
    <div class="div2 center">
        我要居中
    </div>
</div>
</body>
</html>

第七种

第八种

两者都要固定定位,不常用

缺点：需要设置position属性，网页复杂时容易扰乱页面布局,而且只是元素的起始位置居中

<html>
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <style type="text/css">
 
 
        .div1 {
            width: 100px;
            height: 100px;
            border: 1px solid #000000;
            background-color: red;
            position: relative;
        }
 
        .div2 {
            height: 40px;
            width: 40px;
            background-color: green;
            margin:30px 30px;
 
        }
 
        .center{
            position: fixed;
            left: 50%;
        }
 
    </style>
</head>
<body>
 
 
<div class="div1 center">
   
    <div class="div2 center">
        我要居中
    </div>
</div>
</body>
</html>

第八种方法

终身学习者-刘
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
面试题：CSS实现盒子垂直居中
guoxiaozhuang4的博客
04-25 530
&lt;!DOCTYPE html&gt; &lt;!-- 盒子垂直居中对齐总结 注意： 方案3为弹性盒子，子元素会根据自身的宽度与高度来确定尺寸， 但是会自行伸长以吸收flex容器中额外的自由空间，也会缩短至自身最小尺寸以适应容器。 --&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;titl..
面试题：CSS盒子水平居中、垂直居中、水平垂直居中
公众号：前端充电宝
07-15 748
目录1. 实现盒子水平垂直居中方法一：定位（1）方法二：定位（2）方法三：定位（3）方法四：display:flex方法五：使用JavaScript2. CSS3中的盒模型3. 移动端响应式布局 1. 实现盒子水平垂直居中 <div class="parent"> <div class="child"></div> </div> 方法一：定位（1） 注意：该方法需要考虑浏览器兼容问题 .parent { position: relative
CSS 面试题——盒子水平垂直居中
weixin_44453127的博客
02-11 302
CSS 面试题——盒子水平垂直居中 方法一：通过定位(三种方法) 1、已知盒子宽高 html,body{ margin: 0; padding: 0; height: 100%; position: relative; } .box{ width: 600px; height: 400...
前端面试储备——水平垂直居中
迈巧克力的博客
09-07 748
自学前端两月有余，校招近几天也拉开了帷幕，前途依旧一片迷茫，但相比两个月前的自己而言，着实有了不少进步。总之，抛开消极情绪，继续投身于我伟大的前端开发事业之中吧。 　　半月前参加深圳金蝶的提前批面试，虽然很快被刷掉，但作为人生第一次面试，多少回有一些经验积累与总结。面试中问及的问题，有了解的占据70%左右，对于一个当时只自学了不到两个月的菜鸟来说，自认为已经是一个较为满意的结果。但最终没有通过，主
面试题准备（二十三）：使盒子水平垂直居中的五种方法
番茄味姜糖的博客
03-02 1565
介绍了 div 盒子居中的五种方法，其中需要设置子元素宽高的有 第二种 定位 + 负边距 第四种 定位 + 外边距自适应
HCIE-DC笔记及面试宝典
09-24
HCIE-DC笔记及面试宝典 HCIE-DC笔记及面试宝典 HCIE-DC笔记及面试宝典 HCIE-DC笔记及面试宝典
c++笔记9-引用.pdf
11-16
c++笔记9-引用.pdf
autokeras学习笔记-安装篇
最新发布
06-07
autokeras学习笔记-安装篇
HCIE-CloudComputing面试课笔记
03-18
自己准备面试时整理的onenote笔记，虽然现在考新实验是以论述的形式考察知识点，但是对于原理和方案的理解没有降低
JSP学习笔记-2.pdf
11-28
JSP学习笔记-2.pdf
前端面试题-CSS让盒子居中的几种方式
aHaoyu的博客
10-26 2241
前端面试题-CSS让盒子居中的几种方式 第一种 最常用的盒子水平居中方式 <style> .box{ border: 1px red solid; width: 100px; height: 100px; margin: 0 auto; } </style> <body> <div class="box"></div> </body> 第二种 利用定位让盒子水
前端面试之盒子（文字）水平垂直居中的方法
qq_60919669的博客
09-07 5157
方法综合一览就get 类型 分类 重点代码的区别 定位 子绝父相（经典方法） 父盒子：position: relative; 子盒子：position：absolute; top:50%; left:50%; margin-top:-50px;(盒子的一半） margin-left:-50px; margin:auto 父盒子：position: relative; 子盒子...
盒子居中（常用的方法）
tianxia1202的博客
12-15 3801
想必大家都知道，盒子居中不论在项目中还是在面试题中都是常见的对吧！今天我主要分享四种方法，希望对各位同学有一定的帮助。 场景： 假如这里有一个父盒子（parent），子盒子（child），我们需要得到的结果是让子盒子相对父盒子居中，也就是说子盒子在父盒子中居于中间的位置。 ，以便于大家更好的理解。盒子居中一般有两种类型， 1.宽度和高度已经确定的。 2.宽度和高度未确定的。有四种解决方案：
笔试编程题
刘群智的博客
07-27 640
1.题目描述 头条的2017校招开始了！为了这次校招，我们组织了一个规模宏大的出题团队，每个出题人都出了一些有趣的题目，而我们现在想把这些题目组合成若干场考试出来，在选题之前，我们对题目进行了盲审，并定出了每道题的难度系统。一场考试包含3道开放性题目，假设他们的难度从小到大分别为a,b,c，我们希望这3道题能满足下列条件： a&lt;=b&lt;=c b-a&lt;=10 c-b&lt;=10 ...
CSS盒子居中的几种方法
热门推荐
大灰狼的小绵羊哥哥的博客
08-25 4万+
1.第一种 利用margin，div1的宽减去div2的宽就是div2margin-left的数值：（100-40）/2=30 div1的高减去div2的高就是div2margin-top的数值：（100-40）/2=30 按 Ctrl+C 复制代码 demo .div1{ wi
前端面试经典问题：CSS中居中的几种方式
wulixiaoxiao1的博客
02-25 2644
转载自：http://www.jianshu.com/p/a7552ce07c88 为面试常客，学会这些，面试多点把握，同学间逼格升高 周五，老大说他面试了一个问题，是css居中的问题，然后我们在这边就讨论了一番，周末嗨玩，尾巴上想起这件事，特来总结，希望能帮助到求职和学习的朋友！ 参考了这篇文章，快速传送门内容都是我手敲实践过的可靠！ ![](img1.jpg)这
web前端面试-------CSS实现水平居中的六种方法
别告诉我有Bug
09-14 2072
效果图： html： &lt;div class="parent"&gt; &lt;div class="child"&gt;&lt;/div&gt; &lt;/div&gt; 1.通过margin: 0 auto; text-align: center实现CSS水平居中。 .parent{ width: 600px; height: 200px; background: ...
让盒子水平垂直居中的三种方法(面试可能会问到)
weixin_46682277的博客
12-23 958
第一种方法(可以细分出来3个小方法)： 第一个小方法 设置好子绝父相 left:50%;top:50%; margin-left:子盒子负的自身宽度的一半;margin-top:子盒子负的自身高度的一半; 第二个小方法 设置好子绝父相 left:50%;top:50%; transform:translate(-50%,-50%); //表示自身宽高的50% 第三个小方法 设置好子绝父相 left:0;top:0;right:0;bottom:0; margin:auto; 第二种方法flex布
简历资料
刘群智的博客
07-27 1779
专业技能 1.移动端前端开发，PC端前端开发 　　在阿里的几次面试中，总是被问到移动端和PC端有什么区别，当时回答的时候主要是回答了在兼容性、网速、适配、页面布局 等方面的不同，但是还是很不系统，所以这里做一个总结。 第一： PC考虑的是浏览器的兼容性，而移动端开发考虑的更多的是手机兼容性，因为目前不管是android手机还是ios手机， 一般浏览器使用的都是webkit内核，所以说做移...
MIT线性代数公开课笔记-行图像与列图像解析
“线性代数-笔记.pdf”是麻省理工学院教授Gilbert Strang的线性代数公开课笔记，涵盖了线性代数的基础知识，包括矩阵理论、方程组、向量空间、行列式、特征值、相似矩阵和正定矩阵等内容。 线性代数是数学的一个...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值