zoukankan      html  css  js  c++  java
  • 常用居中方法记录

    1.相对定位

    (1)在父元素中使用text-align:center;

    (2)使用margin:auto;

    (3)通过设置left,top偏移量和负边距实现居中

       [width]; height:[height];

        position:absolute;

        left:50% top:50px;

        margin-left:-[width];

        margin-top:-[height];

    (4)通过偏移和css位移实现(css3版)

      position: absolute; left: 50%; top: 50%;
      transform: translate(-50%, -50%);

    (5)绝对定位通过设置四个偏移量和外边距自动实现居中(水平+垂直)

      [width]; height:[height];

      position: absolute;

      left: 0; top: 0; right: 0; bottom: 0;
      margin: auto;

    (6)不定宽居中

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

      

    /*清浮动*/
    .preant::after{
        content:" ";
        display:block;
        height:0px;
        clear:both;
    }
    /*不定宽居中*/
    .preant{
        position:relative;
        display: table;
        margin: 0 auto;
    }
    .child{
        X;
        height:X;
        float:left;
    }
    

      

  • 相关阅读:
    61. Rotate List
    60. Permutation Sequence
    59. Spiral Matrix II
    57. Insert Interval
    18多校8th
    2019山东省赛总结
    二分图——poj2239
    二分图匹配——poj1469
    二分图——poj2446匈牙利算法
    思维构造,建图——cf1159E
  • 原文地址:https://www.cnblogs.com/pangys/p/5585752.html
Copyright © 2011-2022 走看看