div盒子水平居垂直中的几种方法

Posted xlmite

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了div盒子水平居垂直中的几种方法相关的知识，希望对你有一定的参考价值。

 
div盒子水平居垂直中的几种方法
<!DOCTYPE html>
<html>
    <head>
        <mete charset="utf-8"/>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            /*方案1、使用transforms属性的translate平移*/
            .div1{
                position: absolute;
                width: 500px;
                height: 500px;
                border: 1px solid #000;
                left: 50%;
                top: 50%;
                transform: translate(-50%,-50%);
              
            }
            .div2{
                position: absolute;
                width: 250px;
                height: 300px;
                border: 1px solid#000;
                left: 0;
                right: 0;
                top: 0;
                bottom: 0;
                margin: auto;
            }
            margin 负间距
/*
1.必需知道该div的宽度和高度，
2.然后设置位置为绝对位置，
3.距离页面窗口左边框和上边框的距离设置为50%，这个50%就是指盒子左上角顶点距离页面左、上边界的50%，
4.最后将该div分别左移和上移，使整个盒子居中，左移和上移的大小就是该DIV(包括border和padding)宽度和高度的一半。
*/
            .div3{
                position: absolute;
                width: 100px;
                height: 50px;
                border: 1px solid#000;
                margin-top: -26px;
                margin-left: -51px;
                left: 50%;
                top: 50%;
            }
        </style>
    </head>
    <body>
        <div class="div1"></div>
        <div class="div2"></div>
        <div class="div3"></div>
    </body>
</html>

以上是关于div盒子水平居垂直中的几种方法的主要内容，如果未能解决你的问题，请参考以下文章

怎样让div的内容水平垂直居中

div水平垂直居中的几种方法

总结div里面水平垂直居中的实现方法

将一个不定宽高的盒子设置水平垂直居中的六种方法

让DIV水平和垂直居中的几种方法

让DIV水平和垂直居中的几种方法