css居中方法总结

[ClarenceC]

1. 设置子元素宽度,margin:0 auto;

2. 父类设置display:table, 子类设置display:table-cell,vertical-align: middle;

3. 父类设置position:relative, (子类不定宽)

     子类设置position: absolute,
     top:0;
     right:0;
     bottom:0;
     left:0;
     margin: auto;
     子类设置宽度

4. 父类设置text-align:center (子类不定宽)

      父类设置 before 空白区域居中
                     content: '';
                     display: inline-block;
                     height: 100%;
                     vertical-align: middle;
       子类:display: inline-block;

5. css3 flex (子类不定宽)

      父类设置:
                    display: flex;
                    align-items: center;
                    justify-content: center;

6.设置position: fixed,设置

        top: 0;
        right:0;
        bottom:0;
        left: 0;
        margin: auto;
        width: 300px;
        height: 200px;

7. translate (子类不定宽)

      父类设置
       position: relative,
      子类设置
       position: absolute,
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%)

8.Float 浮云居中

父类
float:left;
width:100%;
overflow:hidden;
position:relative;

子类
clear:left;
float:left;
position: relative;
left:50%;/整个分页向右边移动宽度50%/
text-align:center;

样版例子 地址