zoukankan      html  css  js  c++  java
  • css:子元素div 上下左右居中方法总结

    情景一:一个浏览器页面中,只有一个div模块,让其上下左右居中

          解决方案:  { position:fixed;

                  left:0;

                 right:0;

                 top:0;

                 bottom:0;

                 margin:auto; }

          备注:此处小编使用position:fixed为最佳方案,因为position:fixed定位是相对于整个浏览器页面的。

      情景二:一个父元素div,一个已知宽度、高度的子元素div(200*300)

          解决方案: 1、position布局

                 {

                  position:absolute/fixed;

                  top:50%;

                  left:50%;

                  margin-left:-100px;

                  margin-top:-150px;

                  }

      情景三:一个父元素div,一个未知宽度、高度的子元素div

          解决方案: 1、position布局,position设为absolute,其他同情景一

                2、display:table

                父级元素:{ display:table;}

                子级元素: { display:table-cell;vertical-align:middle }

                3、flex布局

                父级元素:{ display:flex;flex-direction:row;justify-content:center;align-items:center;}

                子级元素:{flex:1}

               4、translate

                position: absolute;
                top: 50%;
                left: 50%;
                -webkit-transform: translate(-50%, -50%);
                -moz-transform: translate(-50%, -50%);
                -ms-transform: translate(-50%, -50%);
                -o-transform: translate(-50%, -50%);
                transform: translate(-50%, -50%);

  • 相关阅读:
    查找符号链接的目标
    升级到VS2013.Update.4的问题
    (转载)FT232RL通信中断问题解决办法总结
    WinForms中的Label的AutoSize属性
    VS2010中的查找和替换中正则的使用
    为什么SqlTransaction.Rollback会抛出SqlException(11,-2)(即SQL超时异常)
    腾讯内推 社会招聘 自助操作内推
    腾讯内推流程 社会招聘 腾讯面试流程
    golang sort包的使用(一)
    golang 结构体中空数组被序列化成null解决方法
  • 原文地址:https://www.cnblogs.com/GaoAnLee/p/7839735.html
Copyright © 2011-2022 走看看