面试题CSS居中
2018-12-28 本文已影响0人
KIHO_2658
今天来给大家分享一下我之前在面试公司中做的笔试题
这一次的笔试题没有那么难，但是因为css基础不扎实，所以我也在这道题上面坑了
今天来讲一讲css里面的居中问题，包括水平居中和垂直居中。
01
首先讲一讲水平居中，这个比较简单。
html代码如下
<body>
<div id="box"></div>
</body>
css代码如下
#box{
width: 100px;
height: 100px;
margin: 0 auto;
background-color: bisque;
}
然后打开浏览器，结果如下
image.png
然后就实现了水平居中
在这里我要注意的一点就是
里面不能加上浮动float，不然居中效果会失效
02
现在我来讲讲第二个问题，就是在水平居中的同时，加上垂直居中
再讲这个问题之前，我先说一下绝对定位和相对定位这两个东西
position: absolute;绝对定位：绝对定位是相对于元素最近的已定位的祖先元素（即是设置了绝对定位或者相对定位的祖先元素）。如果元素没有已定位的祖先元素，那么它的位置则是相对于最初的包含块（body）。
position: relative;相对定位：相对定位是相对于元素在文档中的初始位置——首先它出现在它所在的位置上（即不设置position时的位置，然后通过设置垂直或水平位置，让这个元素“相对于”它的原始起点进行移动；
好，我们来一波实战
首先设置两个父子div
html如下
<div id="father">
<div id="son">
</div>
</div>
CSS如下
#father{
width: 400px;
height: 400px;
border: 1px solid blueviolet;
position: relative;
}
#son{
width: 100px;
height: 100px;
background-color: #fcc;
margin:auto;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
}
效果如下
image.png
说到这里，我们把01的代码修改一下
css修改如下
body{
width: 1340px;
height: 620px;
position: relative;
border: 1px solid #000;
}
#box{
width: 100px;
height: 100px;
margin: auto;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
background-color: bisque;
}
展示效果如下
image.png
给body元素设置长宽，也能达到同样效果
ps：实现水平垂直居中的方法很多，上面的方法是我个人推荐的，比较实用。当然有更好的方法可以在下面评论。
