zoukankan      html  css  js  c++  java
  • 小div在大div里面水平垂直都居中的实现方法

    关于如何设置小盒子在大盒子里面水平垂直方向同时居中的实现方法有很多种,下面仅列举了常用的几种。

    首先看一下要实现的效果图及对应的html代码:

    <div class="parent">
        <div class="child">
                    
        </div>
    </div>

    方法一:使用定位的方法

                .parent {
                    width: 300px;
                    height: 200px;
                    border: 1px solid red;
                    position:relative;
                }
                .child {
                    width: 100px;
                    height: 100px;
                    border: 1px solid violet;
                    position:absolute;
                    top: 50%;
                    left:50%;
                    margin-top: -50px;     /*这里是小盒子高的一半*/
                    margin-left: -50px;    /*这里是小盒子宽的一半*/
                }            

    使用定位方法,需要知道子元素的宽高,但是不需要知道父元素的宽高.

     

    方法二:利用定位及margin:auto实现

                .parent {
                    width: 300px;
                    height: 200px;
                    border: 1px solid red;
                    position:relative;
                }
                .child {
                    width: 100px;
                    height: 100px;
                    border: 1px solid violet;
                    position: absolute;
                    margin: auto;
                    top: 0;
                    left: 0;
                    right: 0;
                    bottom: 0;
                }

    实现原理是设置margin自动适应,然后设置定位的上下左右都为0,就如四边均衡受力从而实现盒子的居中;

    方法三:使用display:table-cell; 

                .parent {
                    width: 300px;
                    height: 200px;
                    border: 1px solid red;
                    display: table-cell;
                    vertical-align: middle;
                    text-align: center;
                }
                .child {
                    width: 100px;
                    height: 100px;
                    border: 1px solid violet;
                    display: inline-block;
                }
    实现原理: 
    display:table-cell属性指让标签元素以表格单元格的形式呈现,类似于td标签.
    组合使用vertical-align,text-align,可以使父元素内的所有行内元素水平垂直居中(也就是将内部的元素设置display:inline-block)

    方法四:使用伸缩布局display:flex

                .parent {
                    width: 300px;
                    height: 200px;
                    border: 1px solid red;
                    display: flex;
                    justify-content: center;  /*水平居中*/
                    align-items: center;      /*垂直居中*/
                }
                .child {
                    width: 100px;
                    height: 100px;
                    border: 1px solid violet;
                }

    方法五:计算四周的间距设置子元素与父元素之间的margin-top和margin-left;

                .parent {
                    width: 300px;
                    height: 200px;
                    border: 1px solid red;
                }
                .child {
                    width: 100px;
                    height: 100px;
                    border: 1px solid violet;
                    margin-top: 50px;
                    margin-left: 100px;
                }

    最后这种方法需要同时知道父元素与子元素的宽高,不方便日后的维护.

  • 相关阅读:
    使用正则表达式验证密码长度
    创建字符串
    洛谷P1605 迷宫 深度搜索 模板!
    洛谷P5534 【XR-3】等差数列 耻辱!!!
    搜索字母a或A
    洛谷P1200 [USACO1.1]你的飞碟在这儿Your Ride Is Here
    19新生赛 质数中的质数
    洛谷P1055 ISBN号码
    洛谷P 1427 小鱼的数字游戏
    洛谷p1047 校门外的树
  • 原文地址:https://www.cnblogs.com/stella1024/p/7475545.html
Copyright © 2011-2022 走看看