简单总结position定位和元素水平垂直居中

position
position的属性值共有四个常用的:relative、absolute、fixed、static。
首先普及一下文档流的知识:显示元素对象在窗口排列时所占用的位置,自上而下,从左到右。脱离文档流会影响其他元素的位置。

relative:相对定位,不脱离文档流,在文档流原先的位置进行位移。
absolute:绝对定位,脱离文档流,相对于最近的且不为static的父元素进行定位,把父级当成参考物。无父级则相对于body定位。(body和浏览器窗口不是同一个概念,比如body可以设置宽高和边距)
fixed:固定定位,脱离文档流,相对于浏览器窗口定位,不随滚动条滚动而改变位置。
static:默认值,常用到的top、left、bottom、right会失效。

水平垂直居中
常用的四种元素水平垂直居中的方法:
a.父级相对定位,自级绝对定位

div{
    position:relative;
}
p{
    position:absolute;
    width:100px;
    height:100px;
    left:50%;
    top:50%;
    margin-left:-50px;   //这两行代码也可以替换成
    margin-top:-50px;    //transform:translate(-50%,-50%);
}

b.父级display:flex,子级margin:auto

div{
     display:flex;
}
p{
    margin:auto;
}

c.flex布局

div{
    display:flex;
    justify-content:center;   //主轴方向水平居中  
    align-items:center;        //交叉轴垂直居中  
}

d.定位+margin:auto法

div{
    position:relative;
}
p{
    poaitive:absolute;
    margin:auto;
    top:0;
    left:0;
    right:0;
    bottom:0
}
展开阅读全文

没有更多推荐了,返回首页