02月18, 2019

元素水平垂直居中布局

工作开发过程中,经常会遇到一些居中的问题,这里记录一下一些比较常见的居中方法。

行内元素水平居中

这个比较简单,使用text-align: center即可实现水平居中,不过多讲述。

块级元素水平居中

这种情况也比较简单,使用margin: 0 auto即可实现块级元素的水平居中。另外还可以通过flex布局的方式来实现居中。

这里主要针对还是元素的水平垂直居中,这种情景多出现于弹层,比如弹出登录层或者页面居中显示提示之类的情景。

已知宽高元素的水平垂直居中

方法一、绝对定位 + 负边距

.container{
    position:relative;
}
.box{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200px;
    height: 200px;
    margin-top: -100px;
    margin-left: -100px;
}

主要原理就是,当左边与上边都50%距离时,元素整个是偏离中心位置的,偏离的位置大小就是元素的一半宽度和高度,这个时候只需要使用负边距将元素拉回去就可以了。

未知宽高元素的水平垂直居中

相对于已知宽高元素的居中,未知宽高元素的居中会给人一种比较难解决的感觉。

方法一、绝对定位 + 边距自适应

.container{
    position:relative;
}
.box{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin-left: auto;
}

方法二、绝对定位 + 2D变换

.container{
    position:relative;
}
.box{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

该方法实现原理与 已知宽高元素的水平垂直居中 中的方法一类似,不同之处在于translate属性,该属性表示元素移位,但是其值中的百分比是相对于当前元素来的,所以可以在不知道元素宽高的情况下使用translate往回拉元素一半距离。而上面 margin属性是相对于元素的父元素的,所以无法达成该效果。

方法三、Flex布局

.flex-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.flex-item {
    flex: 0 1 auto;
 }

flex布局可以很轻松实现元素的水平垂直居中,但是flex的兼容性还不太好。主要依靠flex的主轴与交叉轴都居中实现。

本文链接:https://luodao.me/post/element-center-position.html

-- EOF --

Comments

评论加载中...

注:如果长时间无法加载,请针对 disq.us | disquscdn.com | disqus.com 启用代理。