div居中

    
    
    



    
如何让盒子水平垂直居中 方法一
    

        

    
    
如何让盒子水平垂直居中 方法二
    

        

    
    
不知道宽度如何水平垂直居中
    
没有宽度水平垂直居中
    
没有宽度水平居中 例子,分页, 可能2-5页, 所以宽度不确定
    
绝对定位水平垂直居中

效果图
方法一: 给父元素加

display :flex;
 jusitfy-content:center; 
align-items:center;

方法二:给父元素加
display:flex;
子元素加 margin:auto; 就OK了,是不是很简单

垂直水平居中

水平居中

块级元素水平居中
1, 最简单的方法: 给一个显示的宽度, 然后margin: 0 auto; 就可以设置水平居中了.
2, 不知道宽度怎么水平居中

方法一: 
            position: absolute; //绝对定位
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
方法二: 
    页面结构:    
没有宽度水平居中例如, 做一个分页的样式, 
      .box5 {
            float: left;
            position: relative;
            left: 50%;
        }
        .box5>span {
            float: left;
            left: -50%;
            position: relative;
        }

绝对定位水平垂直居中

 .box4 {
            position: absolute;
            /* // 绝对定位 */
            margin: auto;
            top: 0;
            bottom: 0;
            right: 0;
            left: 0;
            width: 100px;
            height: 100px;
            background: red;
        }

box4

所以, 水平垂直居中有几种方法:

1. 有父元素的 display:flex; 子元素 margin:auto;
2. 没有父元素的, 使用绝对定位 和 transform属性, translate x y 轴平移
   position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);

水平居中:

1. 有宽度的, margin: 0 auto;
2. 没有宽度的, 父子元素 先左浮动, 再相对定位, left:50%, 子元素,left:-50%
   .box5 { float: left; position: relative; left: 50%; } .box5>span { float: left; left: -50%; position: relative; }