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

来源：互联网发布：思迅软件费用编辑：程序博客网时间：2024/05/17 08:33

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

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

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

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

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

3.margin：auto

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

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