CSS不固定宽高垂直水平居中

书中仙
2019.02.23 11:27 字数 1970 阅读 108 评论 0 喜欢 0

css垂直水平居中面试中的常考题了,子盒子固定宽高的的垂直水平居中方法可能很多人都会,那么不固定宽高的垂直水平居中你会吗?下面我来列举三种方法。

首先我们的html结构非常简单,两个div嵌套

    <div id="father">
<div id="child"></div>
</div>

然后是基本的css代码

        #father {
width: 600px;
height: 600px;
background-color: lightblue;
}
#child {
width: 300px;
height: 300px;
background-color: greenyellow;
}

注意,这里child加上宽高只是为了直观的观看,下面的css代码都是没有用的这个宽高的。

现在它的样式是这样的,两个框紧紧的贴在一起。


第一种方法:

css3的display:flex,这种方法可能很多人也知道。

        #father {
width: 600px;
height: 600px;
background-color: lightblue;
display: flex;
justify-content: center; /*水平居中*/
align-items: center; /*垂直居中*/
}
#child {
width: 300px;
height: 300px;
background-color: greenyellow;
}

跟子元素的宽高完全没关系

得到的效果是这样的


第二种方法:

这种方法可能了解的人也比较多

        #father {
width: 600px;
height: 600px;
background-color: lightblue;
position: relative;
}
#child {
width: 300px;
height: 300px;
background-color: greenyellow;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}

我们都知道,在子元素固定宽高的时候,我们可以让子元素margin-top:-(自身高度)px; margin-left:-(自身宽带)px; 来解决,那么不固定宽高的子元素我们可以用上述方法。

第三种方法:

这种方法了解的人就比较少了,我们知道margin: auto可以让元素水平居中,其实它也可以让元素垂直居中,怎么做呢?只要我们让上下有足够的空间,就可以让margin的auto来分配上下空间。

        #father {
width: 600px;
height: 600px;
background-color: lightblue;
position: relative;
}
#child {
width: 300px;
height: 300px;
background-color: greenyellow;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}

得到的效果和上边的图一样,就不贴图了,这种方法因为没有用到css3的新增属性,所以兼容性也是最好的。


支付二维码
登录 后发表评论
${comment_count}条评论 评论

智慧如你,不想发表一点想法咩~

推荐阅读
更多精彩内容