zoukankan      html  css  js  c++  java
  • div+css 怎么让一个小div在另一个大div里面 垂直居中

    div+css 怎么让一个小div在另一个大div里面 垂直居中

    方法1:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    .parent {
              width:800px;
              height:500px;
              border:2px solid #000;
              position:relative;
    }
     .child {
                width:200px;
                height:200px;
                marginauto;  
                positionabsolute;  
                top0left0bottom0right0
                background-colorred;
    }

    方法2:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    .parent {
                width:800px;
                height:500px;
                border:2px solid #000;
                display:table-cell;
                vertical-align:middle;
                text-aligncenter;
            }
            .child {
                width:200px;
                height:200px;
                display:inline-block;
                background-colorred;
            }

    方法3:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    .parent {
                width:800px;
                height:500px;
                border:2px solid #000;
                display:flex;
                justify-content:center;
                align-items:center;
            }
            .child {
                width:200px;
                height:200px;
                background-colorred;
            }

    方法4:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    .parent {
                width:800px;
                height:500px;
                border:2px solid #000;
                position:relative;
            }
            .child {
                width:300px;
                height:200px;
                margin:auto;
                position:absolute;/*设定水平和垂直偏移父元素的50%,
    再根据实际长度将子元素上左挪回一半大小*/
                left:50%;
                top:50%;
                margin-left-150px;
                margin-top:-100px;
                background-colorred;
            }
  • 相关阅读:
    Memcached存储溢出
    Memcached windows安装
    Memcached简介
    HTTP请求中怎样选择Get和Post方式
    【cogs 597】【dp】交错匹配
    <LeetCode OJ> 58. Length of Last Word
    codevs1051
    最重要的 Java EE 最佳实践
    android-xBuild apk差分与合成,zip差分与合成,lua打包,apk打包,png/jpg图片压缩
    [Phonegap+Sencha Touch] 移动开发26 Android下的sencha touch程序,转屏时,Ext.Viewport不能触发orientationchange事件的解决的方法
  • 原文地址:https://www.cnblogs.com/as3lib/p/6747722.html
Copyright © 2011-2022 走看看