盒子水平垂直居中的方案

最新推荐文章于 2023-02-11 15:20:32 发布
最新推荐文章于 2023-02-11 15:20:32 发布
阅读量101 收藏
点赞数
文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_47800094/article/details/115840984
版权

1.盒子水平垂直居中的方案

方案1-定位

    <link rel="stylesheet" href="../../css/reset.min.css">
    <style>
        html,
        body{
            height: 100%;
            overflow: hidden;
        }

        .box{
            box-sizing: border-box;
            width: 100px;
            height: 50px;
            line-height: 48px;
            text-align: center;
            font-size: 16px;
            border: 1px solid skyblue;
            background: plum;
        }
        /* 定位 */
        body{
            position: relative;
        }
        .box{
            /* 子绝父相：让子元素相对于父元素定位 */
            position: absolute;
            /* 让盒子左上角垂直水平居中 */
            top: 50%;
            left: 50%;
            /* 让盒子往左上角移动自身宽高的50% */
            margin-top: -25px;
            margin-left: -25px;

            /* 缺点：必须得知道盒子的宽高 */
        }
    </style>
</head>
<body>
    <div class="box" id="box"> box1 </div>
</body>

方案2-定位

 <link rel="stylesheet" href="../../css/reset.min.css">
    <style>
        html,
        body{
            height: 100%;
            overflow: hidden;
        }

        .box{
            box-sizing: border-box;
            width: 100px;
            height: 50px;
            line-height: 48px;
            text-align: center;
            font-size: 16px;
            border: 1px solid skyblue;
            background: plum;
        }

        /* 定位 */
        body{
            position: relative;
        }
        .box{
            /* 子绝父相：让子元素相对于父元素定位 */
            position: absolute;
            /* 让盒子垂直水平居中 */
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            /* 
                优点：无需计算宽高
                缺点：必须得有盒子的宽高 
            */
        }
    </style>
</head>
<body>
    <div class="box" id="box"> box1 </div>
</body>

方案3-定位

<link rel="stylesheet" href="../../css/reset.min.css">
    <style>
        html,
        body{
            height: 100%;
            overflow: hidden;
        }

        .box{
            box-sizing: border-box;
            width: 100px;
            height: 50px;
            line-height: 48px;
            text-align: center;
            font-size: 16px;
            border: 1px solid skyblue;
            background: plum;
        }
        /* 定位 */
        body{
            position: relative;
        }
        .box{
            /* 子绝父相：让子元素相对于父元素定位 */
            position: absolute;
            /* 让盒子左上角垂直水平居中 */
            top: 50%;
            left: 50%;
            /* 让盒子往左上角移动自身宽高的50% */
            transform: translate(-50%,-50%);
            /* 
                优点：无需计算宽高，不需要具体宽高
                缺点：不兼容 
            */
        }
    </style>
</head>
<body>
    <div class="box" id="box"> box1 </div>
</body>

方案4-display:flex

    <link rel="stylesheet" href="../../css/reset.min.css">
    <style>
        html,
        body{
            height: 100%;
            overflow: hidden;
        }

        .box{
            box-sizing: border-box;
            width: 100px;
            height: 50px;
            line-height: 48px;
            text-align: center;
            font-size: 16px;
            border: 1px solid skyblue;
            background: plum;
        }
        body{
            /* 让子元素在主轴、侧轴居中排列*/
            display: flex;
            justify-content: center;
            align-items: center;
            /*  缺点：不兼容，移动端适用 */
        }
    </style>
</head>
<body>
    <div class="box" id="box"> box1 </div>
</body>

方案6-js

    <link rel="stylesheet" href="../../css/reset.min.css">
    <style>
        html,
        body{
            position: relative;
            height: 100%;
            overflow: hidden;
        }

        .box{
            position: absolute;
            box-sizing: border-box;
            width: 100px;
            height: 50px;
            line-height: 48px;
            text-align: center;
            font-size: 16px;
            border: 1px solid skyblue;
            background: plum;
        }
    </style>
</head>
<body>
    <div class="box" id="box"> box1 </div>
    <script>
        /*
            获得屏幕与当前盒子的宽和高，用（当前屏幕的宽和高-盒子的宽和高）/2
        */ 
       let html = document.documentElement,
            winW = html.clientWidth,
            winH = html.clientHeight,
            boxW = box.offsetWidth,
            boxH = box.offsetHeight;
        box.style.left = (winW - boxW) / 2 + 'px';
        box.style.top = (winH - boxH) / 2 + 'px';
    </script>
</body>

*方案7-display:table-cell（一般不使用） *

.father{
      display: table-cell;
      vertical-align: middle;
      text-align: center;
      //=>宽高不能是百分比
}

重置样式表
reset.min.css

body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,button,input,textarea,th,td{margin:0;padding:0}body{font-size:12px;font-style:normal;font-family:"\5FAE\8F6F\96C5\9ED1",Helvetica,sans-serif}small{font-size:12px}h1{font-size:18px}h2{font-size:16px}h3{font-size:14px}h4,h5,h6{font-size:100%}ul,ol{list-style:none}a{text-decoration:none;background-color:transparent}a:hover,a:active{outline-width:0;text-decoration:none}table{border-collapse:collapse;border-spacing:0}hr{border:0;height:1px}img{border-style:none}img:not([src]){display:none}svg:not(:root){overflow:hidden}html{-webkit-touch-callout:none;-webkit-text-size-adjust:100%}input,textarea,button,a{-webkit-tap-highlight-color:rgba(0,0,0,0)}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block}audio:not([controls]),video:not([controls]){display:none;height:0}progress{vertical-align:baseline}mark{background-color:#ff0;color:#000}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}button,input,select,textarea{font-size:100%;outline:0}button,input{overflow:visible}button,select{text-transform:none}textarea{overflow:auto}button,html [type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}[type="search"]::-webkit-search-cancel-button,[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-input-placeholder{color:inherit;opacity:.54}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}.clearfix:after{display:block;height:0;content:"";clear:both}
freedom122198
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
div框水平垂直居中跟内容垂直居中.html
03-31
div框水平垂直居中跟内容垂直居中
css中常用的几种水平垂直居中方案
Ming_xm的博客
06-08 439
例如先给两个盒子设定父子关系然后给父盒子设置border等属性然后给子盒子设置margin属性盒子就可以水平居中了。
CSS盒子垂直居中的六种方法：flex、定位、margin:auto、位移、计算、display: table-cell
weixin_48082900的博客
02-09 399
盒子垂直居中常用方法合集
盒子居中 方法
xtyxtyxtywq的博客
09-23 563
盒子居中 方法
文本和盒子的水平 垂直居中 (18种方法)
qq_52301431的博客
04-08 1万+
图片与盒子的基线： <div class="img"> <img src="" alt=""> </div> 给img设置了高度，div没有设置，就会出现div会大一些。 所以解决方法：给div加和img一样的宽度，或者hight：100% 图片和文字基线对齐： ............
设置子盒子在父盒子内垂直居中的几种方法
一个超可爱的账号
02-11 889
设置子盒子在父盒子内垂直居中的方法
div水平垂直居中的完美解决方案
09-25
很多情况需要用到div的居中，下面是脚本之家编辑参考一些网站整理的一篇文章。希望对朋友们有所帮助。
使用CSS实现盒子水平垂直居中的方法(8种)
01-18
原始代码： center.html： <!DOCTYPE html> <html lang=Zh> <head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, initial-scale=1.0>...
css常用元素水平垂直居中方案
01-19
flex实现水平垂直居中 适用场景：父子宽高都可未知(比较推荐这种方式，简单，而且目前兼容性也不错。) <html> <head> <style> .parent { width: 100%; height: 100px; background: cyan; ...
CSS水平垂直居中解决方案(6种)
09-24
主要介绍了CSS水平垂直居中解决方案(6种)的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
html盒子页面居中,网页布局盒子(box)相关属性和盒子居中
weixin_39868663的博客
06-07 3733
网页布局中盒子的相关属性：一、盒子的基础属性：1、width和height：设置盒子的宽度和高度：常见单位：px,em,rem,vh/vm等2、background:color(设置背景颜色),image(设置背景图片)，repeat(设置背景图片如何重复)，clip(设置背景图片剪裁)，position|size(设置图片位置，和尺寸大小)，attachment(设置图片是否背景固定和滚动：值有...
盒子居中的三种方法(最简单）
热门推荐
qq_46034942的博客
02-16 2万+
1.利用定位（子绝父相）、margin-left、和margin-top实现 子盒子相对于父盒子进行移动。在父盒子内，先移动父盒子宽的一半，再移动父盒子高的一半。此时的子盒子在父盒子的偏右下的位置，再次需要移动子盒子，将子盒子向左移动自身宽度的一半，再向上移动自身高度的一半。 缺点在于如果修改了子盒子的宽高，则就需要修改margin-left和margin-top的值 .father { /* 给父盒子设置相对定位 */ position: rel
掌握盒子水平垂直居中的六大方案——面试重点
qq_38178056的博客
12-30 419
掌握盒子水平垂直居中的六大方案——面试重点 前言：今天主要分享一个前端面试题中90%会问到的一个问题——关于如何实现盒子水平垂直居中，在面试时，面试官往往会问，有两个盒子，如何让一个盒子在另一个盒子中水平垂直居中，或者面试官直接在纸上画两个盒子，你跟我说说怎么让里面的盒子水平垂直居中，下面我列出主要的六大解决方案： 定位（三种） flex JavaScript display:table-cel...
CSS 简单实现垂直居中，好理解好记忆
m0_37973043的博客
08-25 597
在CSS中对元素进行水平居中是非常简单的：如果它是一个行内元素，就对它的父元素应用text-align:center；如果它是一个块级元素，就对它自身应用margin:auto。然而如果要对一个元素进行垂直居中，就有些头皮发麻了。 本文来探讨几种实现垂直居中的方法，以下图作为起点。 <main> <h1>Am I centered yet?</h1> <p>Center ...
盒子居中的几种方式
scootdao的博客
10-21 3622
第一种：普通流盒子居中；     通过设置上边框为透明色，进行高度及计算，后居中；*{ margin: 0; padding: 0; } .big{ width: 400px; height: 400px;
box-sizing:border-box设置并排带边框的容器
malan_wpf的专栏
03-15 1726
css code： div.box { box-sizing: border-box;/*两个并排的带边框的框*/ width: 50%; border: 8px solid red; float: left; } html code： hello world 不管边框有多粗，都不会被挤下来。
盒模型，CSS水平居中的三种方法
Conely的博客
11-15 1246
1.谈谈对盒模型的理解，以及如何在css中告诉浏览器使用不同的盒模型来渲染你的布局。 组成：content、padding、border、margin W3C盒子/内容盒子/标准盒子【默认】 box-sizing：content-box; width = 内容宽 所占的宽 = width + padding + border + margin IE盒子/边框盒子 box-sizing:border-box; width = 内容宽 + padding + border 所占宽 = width + margi
css让盒子水平垂直居中
最新发布
07-29
要让一个盒子水平垂直居中，可以使用以下的CSS方法： 1. 使用Flexbox布局： ```css .container { display: flex; justify-content: center; /* 水平居中 */ align-items: center; /* 垂直居中 */ } ``` 2. 使用...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值