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

最新推荐文章于 2024-05-14 03:55:35 发布

苏小哈

最新推荐文章于 2024-05-14 03:55:35 发布

阅读量302

点赞数

分类专栏： css 文章标签： css 面试前端

本文链接：https://blog.csdn.net/github_38849342/article/details/73246918

版权

css 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

前几天去面试，都被问到了这个问题。作为前端小白，啥都没准备，按照自己的想法说了说，感觉全都没说到点上来。特去网上搜了搜，整理如下——
哦，对了。在面试过程中，我一直有个误区，就是我以为是让元素相对浏览器页面居中，结果这才发现其实面试官的意思应该是相对某一个父级元素居中。

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;
        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>

苏小哈

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端面试经典问题——css居中的几种方式

前几天去面试，都被问到了这个问题。作为前端小白，啥都没准备，按照自己的想法说了说，感觉全都没说到点上来。特去网上搜了搜，整理如下—— 哦，对了。在面试过程中，我一直有个误区，就是我以为是让元素相对浏览器页面居中，结果这才发现其实面试官的意思应该是相对某一个父级元素居中。1.父级相对定位子级绝对定位<style type="text/css"> #father{ heigh
复制链接

扫一扫