前端面試經典問題：CSS中居中的幾種方式

linydee 7年前發布 | 14K 次閱讀 CSS 前端技術

作為面試常客，學會這些，面試多點把握，同學間逼格升高

周五，老大說他面試了一個問題，是css居中的問題，然后我們在這邊就討論了一番，周末嗨玩，尾巴上想起這件事，特來總結，希望能幫助到求職和學習的朋友！

1.水平居中的 margin：0 auto;

關于這個，大家也不陌生做網頁讓其居中用的比較多,

這個是用于子元素上的，前提是不受float影響

<style>
    *{
        padding: 0;
        margin: 0;
    }
        .box{
            width: 300px;
            height: 300px;
            border: 3px solid red;
            /*text-align: center;*/
        }
        img{
            display: block;
            width: 100px;
            height: 100px;
            margin: 0 auto;
        }
    </style>

<!--html-->
<body>
    <div class="box">
        ![](img1.jpg)
    </div>
</body>

2.水平居中 text-align：center；

img的display：block；類似一樣在不受float影響下進行

實在父元素上添加效果讓它進行水平居中

<style>
    *{
        padding: 0;
        margin: 0;
    }
        .box{
            width: 300px;
            height: 300px;
            border: 3px solid red;
            /*text-align: center;*/
        }
        img{
            display: block;
            width: 100px;
            height: 100px;
            margin: 0 auto;
        }
    </style>

<!--html-->
<body>
    <div class="box">
        ![](img1.jpg)
    </div>
</body>

前端面試經典問題：CSS中居中的幾種方式

3.水平垂直居中（一）定位和需要定位的元素的margin減去寬高的一半

這種方法的局限性在于需要知道需要垂直居中的寬高才能實現，經常使用這種方法

<style>
        *{
            padding: 0;
            margin: 0;
        }
        .box{
            width: 300px;
            height: 300px;
            background:#e9dfc7; 
            border:1px solid red;
            position: relative;
        }
        img{
            width: 100px;
            height: 150px;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -75px;
            margin-left: -50px;
        }
    </style>
<!--html -->
<body>
    <div class="box" >
        ![](2.jpg)
    </div>
</body>

水平垂直居中1

4.水平垂直居中（二）定位和margin:auto;

這個方法也很實用，不用受到寬高的限制,也很好用

<style>
        *{
            padding: 0;
            margin: 0;
        }
        .box{
            width: 300px;
            height: 300px;
            background:#e9dfc7; 
            border:1px solid red;
            position: relative;

        }
        img{
            width: 100px;
            height: 100px;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
        }
    </style>
<!--html -->
<body>
    <div class="box" >
        ![](3.jpg)
    </div>
</body>

水平垂直居中2

5.水平垂直居中（三）絕對定位和transfrom

這個方法比較高級了，用到了形變，據我所知很多大神喜歡使用這個方法進行定位，逼格很高的，學會后面試一定要用！

<style>
    *{
        padding: 0;
        margin: 0;
    }
    .box{
        width: 300px;
        height: 300px;
        background:#e9dfc7; 
        border:1px solid red;
        position: relative;

    }
    img{
        width: 100px;
        height: 100px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
    }
</style>
<!--html -->
<body>
    <div class="box" >
        ![](3.jpg)
    </div>
</body>

水平垂直居中3

6.水平垂直居中（四）diplay：table-cell

其實這個就是把其變成表格樣式，再利用表格的樣式來進行居中，很方便

<style>
    .box{
            width: 300px;
            height: 300px;
            background:#e9dfc7; 
            border:1px solid red;
            display: table-cell;
            vertical-align: middle;
            text-align: center;
        }
        img{
            width: 100px;
            height: 150px;
            /*margin: 0 auto;*/  這個也行
        }
</style>
<!--html -->
<body>
    <div class="box" >
        ![](5.jpg)
    </div>
</body>

水平垂直居中4

7.水平垂直居中（五）flexBox居中

這個用了C3新特性flex,非常方便快捷，在移動端使用完美，pc端有兼容性問題，以后會成為主流的

<style>
    .box{
            width: 300px;
            height: 300px;
            background:#e9dfc7; 
            border:1px solid red;
            display: flex;
            justify-content: center;
            align-items:center;
        }
        img{
            width: 150px;
            height: 100px;
        }
</style>
<!--html -->
<body>
    <div class="box" >
        ![](6.jpg)
    </div>
</body>

垂直居中5

常見又實用的例子就先寫到這，歡迎提意見，謝謝大家！喜歡請點個喜歡，也是對我的支持和鼓勵！

 

來自：http://www.jianshu.com/p/a7552ce07c88

 

 本文由用戶 linydee 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！