【前端】盒子水平垂直居中的六大妙招

最新推荐文章于 2024-07-25 15:36:12 发布

置顶 Gauche 楽

最新推荐文章于 2024-07-25 15:36:12 发布

阅读量1.5k

点赞数 2

分类专栏： css面试题笔记文章标签： css js

本文链接：https://blog.csdn.net/big_asm/article/details/106266715

版权

css面试题同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

笔记

2 篇文章 0 订阅

订阅专栏

第一种方式定位方法

使用定位实现，让子盒子相对于父盒子进行定位

父盒子设置相对定位，父盒子设置绝对定位
先把盒子挪到中间，然后向上向下移动自己的一半
缺点嘛就是必须知道盒子的宽高，才能计算移动的距离

<style>
    
        .aa{
           
            width: 600px;
            height: 600px;
           position: relative;
           background-color: blueviolet;
        }
        .bb{
            width: 200px;
            height: 200px;
            background-color: pink;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -100px;
            margin-top: -100px;

        }
    </style>
</head>
<body>
    <div class="aa">
        <div class="bb">

        </div>
    </div>
</body>

第二种方式四个方向都设为0 拖动

缺点嘛：就是虽然不用知道具体的宽高，但是必须要有固定的宽高

<style>
    
        .aa{
           
            width: 600px;
            height: 600px;
           position: relative;
           background-color: blueviolet;
        }
        .bb{
            width: 200px;
            height: 200px;
            background-color: pink;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin:  auto;

        }
    </style>
</head>
<body>
    <div class="aa">
        <div class="bb">

        </div>
    </div>
</body>

第三种方式 css3的动画

+/* 兼容问题 /
/ 可以子盒子不设置宽高 */

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    
        .aa{
           
            width: 600px;
            height: 600px;
           position: relative;
           background-color: blueviolet;
        }
        .bb{
            /* width: 200px; */
            /* height: 200px; */
            background-color: pink;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);

        }
        /* 兼容问题 */
        /* 可以子盒子不设置宽高 */
    </style>
</head>
<body>
    <div class="aa">
        <div class="bb">
大萨达
        </div>
    </div>
</body>
</html>

上面三种方法都用到了定位
———————————————————————————————

第四种方式 cflex布局

缺点就是兼容性问题，适合移动端大面积使用，很爽

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    
        .aa{
           
            width: 600px;
            height: 600px;
           display: flex;
           justify-content: center;
           align-items: center;
           background-color: blueviolet;
        }
        .bb{
            width: 200px;
            height: 200px;
            background-color: pink;
            

        }
    </style>
</head>
<body>
    <div class="aa">
        <div class="bb">

        </div>
    </div>
</body>
</html>

第五种方式 javacript实现

获得当前屏幕的宽和高，获取盒子的宽和高，然后定位的时候用屏幕宽高减去盒子宽高再除以2.本质上还是基于定位来的，需设置body的position为relative，box的position为absolute。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    
        body{
           position: relative;
          overflow: hidden
          ;
         height: 100%;
        }
        .bb{box-sizing: border-box;

            width: 100px;
            height: 50px;
            line-height: 48px;
            text-align: center;
            font-size: 16px;
            background-color: pink;
        }
    </style>
</head>
<body>
   
        <div class="box" id="box">
sdsd 
        </div>
    
</body>
<script>
    let html=document.documentElement,
    winw=html.clientWidth,
    
    
    winh=html.clientHeight,
    aa=box.offsetWidth,
    boxh=box.offsetHeight;
    box.style.position="absolute"
    box.style.left=(winw-aa)/2+"px"
    box.style.top=(winh-boxh)/2+"px"
    console.log(winw);
    console.log(box.offsetWidth);
    console.log(winh);
    console.log(boxh);
    
    
    
</script>
</html>

第六种方式 table-cell布局实现

1. 不要与float：left; position:absolute; 一起使用

可以实现大小不固定元素的垂直居中
margin设置无效，响应padding设置
对高度和宽度高度敏感
不要对display：table-cell使用百分比设置宽度和高度

display：table-cell；会使元素表现的类似一个表格中的单元格td，利用这个特性可以实现文字的垂直居中效果。同时它也会破坏一些CSS属性，使用table-cell时最好不要与float以及position: absolute一起使用，设置了table-cell的元素对高度和宽度高度敏感，对margin值无反应，可以响应padding的设置，表现几乎类似一个td元素。

<style>
    
        .aa{
           
            width: 600px;
            height: 600px;
            background-color: yellow;
            display: table-cell;
            vertical-align: middle;
            /* text-align: center; */
        }
        .bb{
            margin: auto;
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="aa">
        <div class="bb">

        </div>
    </div>
</body>

总结：其实盒子水平居中还有其他的解决方案，当前最常用的是第三种和第四种方式，但是他们需要考虑兼容，对于一些老版本的浏览器例如IE8以及之前的是不兼容的。可根据项目中的实际需要去选择采用的方式。

Gauche 楽

关注

2
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
【前端】盒子水平垂直居中的六大妙招

第一种方式定位方法使用定位实现，让子盒子相对于父盒子进行定位父盒子设置相对定位，父盒子设置绝对定位先把盒子挪到中间，然后向上向下移动自己的一半缺点嘛就是必须知道盒子的宽高，才能计算移动的距离<style> .aa{ width: 600px; height: 600px; position: relative; background-c.
复制链接

扫一扫