您的位置：首页 > 职场人生

前端面试经典问题——css居中的几种方式

2017-06-14 16:26 736 查看
前几天去面试，都被问到了这个问题。作为前端小白，啥都没准备，按照自己的想法说了说，感觉全都没说到点上来。特去网上搜了搜，整理如下——

哦，对了。在面试过程中，我一直有个误区，就是我以为是让元素相对浏览器页面居中，结果这才发现其实面试官的意思应该是相对某一个父级元素居中。

1.父级相对定位 子级绝对定位

<style type="text/css">
#father{
height: 500px;
width: 500px;
background-color: yellow;
margin:50px auto;
border: 1px solid #cecece;
position: relative;
}
#son{
height: 100px;
width: 100px;
background-color: red;
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;

}
</style>
<body>
<div id="father">
<div id="son"></div>
</div>
</body>
</html>


2.父级没有定位 子级相对定位

<style type="text/css">
#father{
height: 500px;
width: 500px;
background-color: yellow;
margin:50px auto;
border: 1px solid #cecece;
}
#son{
height: 100px;
width: 100px;
background-color: red;
margin: 50% auto;
position: relative;
top: -50px;

}
</style>
<body>
<div id="father">
<div id="son"></div>
</div>
</body>
</html>


3.margin：auto

<style type="text/css">
#father{
height: 500px;
width: 500px;
background-color: yellow
4000
;
margin:50px auto;
position: relative;
border: 1px solid #cecece;
}
#son{
height: 100px;
width: 100px;
background-color: red;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin:auto;

}
</style>
<body>
<div id="father">
<div id="son"></div>
</div>
</body>
</html>


4、css3 display:flex

<style type="text/css">
#father{
height: 500px;
width: 500px;
background-color: yellow;
border: 1px solid #cecece;
display: flex;
justify-content: center;
align-items: center;
}
#son{
height: 100px;
width: 100px;
background-color: red;
}
</style>
<body>
<div id="father">
<div id="son"></div>
</div>
</body>
</html>


5、flexbox margin:auto

<style type="text/css">
#father{
height: 500px;
width: 500px;
background-color: yellow;
border: 1px solid #cecece;
display: flex;
/* justify-content: center; */
/* align-items: center; */
}
#son{
height: 100px;
width: 100px;
background-color: red;
margin: auto;
}
</style>
<body>
<div id="father">
<div id="son"></div>
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  css 面试 前端
相关文章推荐
新的分享
章节导航