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;
       }

  • 相关阅读:
    SpringMvc 框架
    面试:你最大的长处和弱点分别是什么?这些长处和弱点对你在企业的业绩会有什么样的影响?
    线程、并发、并行、进程是什么,以及如何开启新的线程?
    面向对象三大特性
    一台客户端有三百个客户与三百个客户端有三百个客户对服务器施压,有什么区别?
    JavaScript 引擎
    Spring Data JPA简介 Spring Data JPA特点
    redo log 有什么作用?
    Spring的简介和优点?
    学习笔记——享元模式Flyweight
  • 原文地址:https://www.cnblogs.com/x-yy/p/11372357.html
Copyright © 2011-2022 走看看