margin auto

1. margin auto 与垂直居中

关于垂直居中的方式
方式1:
利用父元素position:relative和子元素position:absolute; left: 50%; top: 50%;,然后再计算margin-left为负的子元素的width的一半,margin-top为负的子元素的height的一半



    
        
        垂直居中的方式
        
    
    
        

展示结果


margin auto_第1张图片
image1.png

方式2:
采用css3的新特性transform:translate(-50%, -50%),表示向上,向左移动自身元素的50%,这种方式相对方式1的好处是不需要提前知道子元素的宽度,高度



    
        
        垂直居中的方式
        
    
    
        

展示结果

margin auto_第2张图片
image2.png

方式3: 本文重点要提到的内容
重点是设置了 left:0; right:0; top:0; bottom:0以及 margin:auto

引用
  当一个绝对属性元素,其对立定位方向属性同时存在具体数值时,其流体性就体现出来了
  具有流体特性的绝对定位元素的margin:auto的填充规则和普通流体元素一模一样
    1. 如果一侧是定值,一个是auto,auto为剩余空间大小;
    2. 如果两侧均为auto,则平分剩余空间
注: 流体元素:就是指普通的html元素




    
    margin auto 实现垂直居中
    


    

展示结果


margin auto_第3张图片
image3.png

关于属性百分比的计算
参见css属性百分比的计算

此部分内容参考张鑫旭老师的文章
2.margin auto与flex布局
在flex布局中使用margin: auto可以实现flex item的垂直,水平居中,和左右居中等,详细原理参考flex布局算法,简单来说就是margin:auto会优先于justify-content,align-items等设置水平排列,垂直排列方式的属性生效,将flex items以外的所有剩余空间占据
举例1:
margin:auto实现垂直水平居中




    
    flex margin
    


    
item1
item2
item3
item4
item5

展示结果


margin auto_第4张图片
image1.png

举例2:
margin auto左右分栏展示




    
    flex margin
    


    
item1
item2
item3
item4
item5

展示结果

margin auto_第5张图片
image2.png

此部分内容参考 蜂蜜柚子茶的文章

本文目的仅仅是为了个人查找阅读等提供方便

你可能感兴趣的