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;

            }

  • 相关阅读:
    Go学习笔记(四)Go自动化测试框架
    VSCode快捷键
    Go学习笔记(三)Go语言学习
    Go学习笔记(二)搭建Visual Studio Code调试环境
    Go学习笔记(一)安装Go语言环境
    C# HTTPServer和OrleansClient结合
    C# Post HTTP Request
    Unity3D UGUI Shader画一个圆环
    Orleans学习总结(六)--应用篇
    Orleans学习总结(四)--集群配置篇
  • 原文地址:https://www.cnblogs.com/webwangjie/p/6893262.html
Copyright © 2011-2022 走看看