zoukankan      html  css  js  c++  java
  • DIV水平居中和垂直居中布局

    一、水平居中

    1. inline-block + text-align

    text-align(他会有继承) 作用在块级元素上,会让块级元素的inline-block子级 ,进行排列

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

      .parent{
         200px;
        text-align: center;
       }
            .child{
        display: inline-block;  
       }

    2. table + margin

    table如果不给它的所在元素设置宽的话,他的宽会是由内容撑开

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

      .child{
          display: table;
          margin: 0 auto;
         }

    3.absolute + transform

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

    .parent{
        position: relative;
       }
       .child{
        position: absolute;
        left:50%;
        transform: translateX(-50%);
       }

    4.flex + justify content

    flex的属性值其实也可以支持margin:0 auto;

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

    .parent{
        display: flex;
        justify-content: center;
       }

    .parent{
        display: flex;
       }
       .child{
        border: 1px solid green;
        margin: 0 auto;
       }

    二、父元素和子元素都不定高,实现垂直居中

    1.tale-cell + vertical-align

    tale-cell 单元格这样的属性值,会自动让他的子元素居中

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

    .parent{
        display: table-cell;
        vertical-align: middle;
       }

    2.absolute + transform

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

    .parent{
        position: relative;
       }
       .child{
        position: absolute;
        top:50%;
        transform: translateY(-50%);
       }

    3.flex + align-items

    align-items他的默认值是拉伸,布满整个容器

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

    .parent{
        display: flex;
        align-items: center;
       }

    三、容器大小不固定,同时居中

    效果图.png

    1.inline-block + text-align + tale-cell + vertical-align

    tale-cell 单元格这样的属性值,会自动让他的子元素居中

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

    .parent{
        text-align: center;
        display: table-cell;
        vertical-align: middle;
       }
       .child{
        display: inline-block;
       }

    2.absolute + transform

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

    .parent{
        position: relative;
       }
       .child{
        position: absolute;
        top:50%;

        left:50%;
        transform: translate(-50%,-50%);

       }

    3.flex + judifycontent + align-items

    align-items他的默认值是 stretch拉伸,布满整个容器

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

       .parent{
        display: flex;
        justify-content: center;
        align-items: center;
       }

  • 相关阅读:
    VS Code中编写C
    Latex
    JAVA学习-----容器和数据结构
    Markdown2最最基本操作说明(未完待续)
    [lua] table.sort(_table, comp)使用要点
    [coco2d]pageView:addPage时,page无法对齐
    [cocos2d]修改富文本文本和高度
    [cocos2d]格式化获取当前layer的控件名
    [c++]牛客刷题记录2.18
    [c++]STL学习
  • 原文地址:https://www.cnblogs.com/x-yy/p/11372357.html
Copyright © 2011-2022 走看看