面试笔记(五)---盒子居中

 

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

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

这种方法灵活运用CSStransform属性,较为新奇。缺点是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

  • 不确定宽高居中(绝对定位百分数)

这种不确定宽高的居中,较为灵活。只需要保证leftright的百分数一样就可以实现水平居中,保证topbottom的百分数一样就可以实现垂直居中。

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
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值