zoukankan      html  css  js  c++  java
  • div嵌套绝对居中的方法

     方法1:

    .parent {

              800px;

              height:500px;

              border:2px solid #000;

              position:relative;

    }

    .child {

                200px;

                height:200px;

                margin: auto; 

                position: absolute; 

                top: 0; left: 0; bottom: 0; right: 0;

                background-color: red;

    }

    方法2:

    .parent {

                800px;

                height:500px;

                border:2px solid #000;

                display:table-cell;

                vertical-align:middle;

                text-align: center;

            }

            .child {

                200px;

                height:200px;

                display:inline-block;

                background-color: red;

            }

    方法3:

    .parent {

                800px;

                height:500px;

                border:2px solid #000;

                display:flex;

                justify-content:center;

                align-items:center;

            }

            .child {

                200px;

                height:200px;

                background-color: red;

            }

    方法4:

    .parent {

                800px;

                height:500px;

                border:2px solid #000;

                position:relative;

            }

            .child {

                300px;

                height:200px;

                margin:auto;

                position:absolute;/*设定水平和垂直偏移父元素的50%,

    再根据实际长度将子元素上左挪回一半大小*/

                left:50%;

                top:50%;

                margin-left: -150px;

                margin-top:-100px;

                background-color: red;

            }

  • 相关阅读:
    书籍下载点
    总结一下散乱的开发点滴(3) (高手勿入)
    [收藏]Dynamic Controls in ASP.NET
    [收藏] ORACLE中函数
    面试题收集,面试和被面试中煎熬~~
    一句SQL得出表中重复的数据(TMP)
    总结一下散乱的开发点滴(4) (高手勿入)
    一个同步的例子
    关于学习的反思(下)系网开发记(4)
    关于学习的反思(上)系网开发记(2)
  • 原文地址:https://www.cnblogs.com/webwangjie/p/6893262.html
Copyright © 2011-2022 走看看