美文网首页
css div垂直居中

css div垂直居中

作者: 我是syq吖 | 来源:发表于2019-06-11 14:39 被阅读0次

    方案一:div绝对定位水平垂直居中【margin:auto实现绝对定位元素的居中】,

    div{
                width: 200px;
                height: 200px;
                background: green;
                position:absolute;
                left:0;
                top: 0;
                bottom: 0;
                right: 0;
                margin: auto;
            }
    

    方案二:div绝对定位水平垂直居中【margin 负间距】

    div{
                width:200px;
                height: 200px;
                background:green;
                position: absolute;
                left:50%;
                top:50%;
                margin-left:-100px;
                margin-top:-100px;
            }
    

    方案三:div绝对定位水平垂直居中【Transforms 变形】

    div{
                width: 200px;
                height: 200px;
                background: green;
                position:absolute;
                left:50%;    /* 定位父级的50% */
                top:50%;
                transform: translate(-50%,-50%); /*自己的50% */
            }
    

    方案四:css不定宽高水平垂直居中

    .box{
    
                 height:600px;
                 display:flex;
                 justify-content:center;
                 align-items:center;
                   /* aa只要三句话就可以实现不定宽高水平垂直居中。 */
            }
            .box>div{
                background: green;
                width: 200px;
                height: 200px;
            }
    

    方案五:对子盒子实现绝对定位,利用calc计算位置

    <p class="outerBox calc">
        </p><p class="innerBox">calc</p>
    <p></p>
    
    /*绝对定位,clac计算位置*/
    .calc{
      position: relative;
    }
    .calc .innerBox{
      position: absolute;
      left:-webkit-calc((500px - 200px)/2);
      top:-webkit-calc((120px - 50px)/2);
      left:-moz-calc((500px - 200px)/2);
      top:-moz-calc((120px - 50px)/2);
      left:calc((500px - 200px)/2);
      top:calc((120px - 50px)/2);
    }
    

    相关文章

      网友评论

          本文标题:css div垂直居中

          本文链接:https://www.haomeiwen.com/subject/gikqfctx.html