常見面試題—css實現垂直水平居中

gougoujiang 發布于2019-08-29 15:40 / 1110人閱讀

摘要：常見面試題實現垂直水平居中前言面試中常常被問到，如何使用來實現一個元素的垂直水平方向上居中，特別是筆試題的時候，這道題目的出現頻率還是比較高的，當然，在我們的生活中，也常常會有垂直水平居中的需求。

常見面試題—css實現垂直水平居中 前言

面試中常常被問到，如何使用css來實現一個元素的垂直水平方向上居中，特別是筆試題的時候，這道題目的出現頻率還是比較高的，當然，在我們的生活中，也常常會有垂直水平居中的需求。

css實現垂直水平居中的三種方案

1.容器內元素display:inline/inline-block

這種情況就比較容易了，直接設置容器的text-align就可以實現內容元素的水平居中，設置垂直居中的話要設置容器的高度，然后設置容易的line-height===height就可以，如下：

     
        this is text

    .container{
        text-align: center;
        height: 50px;
        background: green;
        line-height: 50px;
    }

2.容器內元素display:block,且元素寬高已知

這種情況下我們使用position這個屬性結合設置偏移來實現。首先設置容器的position:relative,設置元素position為absolute，然后設置元素（.inner-box）的偏移top,left,margin-top,margin-left,其中，top，left設置為50%,而margin-top/margin-left的偏移量均為本身元素高/寬的一半，為負值。

代碼如下：

    .container {
        height: 200px;
        width: 200px;
        background: pink;
        position: relative;
    }

    .inner-box {
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -50px;
        margin-left: -50px;
        height: 100px;
        width: 100px;
        background: green;
    }

3.容器內元素display:block,且元素寬高未知

這種方法與方法二類似，但是不同的是不能通過設置margin-top/left偏移來達到效果了，因為容器內元素的寬高是未知的。這次我們通過設置left/top/bottom/right:0,然后設置margin:auto。
代碼如下：

    .container {
            height: 200px;
            width: 200px;
            background: pink;
            position: relative;
        }

    .inner-box {
        position: absolute;
        height: 100px;
        width: 100px;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        margin: auto;
        background: green;
    }

后話

實現垂直水平居中的方式有多種，通過設置translate，或者使用flex布局也是可以的，但是以上寫的幾種方法是兼容性比較好的。如果有不足，歡迎這位大佬指出。

云服務器 GPU云服務器 js常見面試題水平垂直居中實現垂直居中垂直居中

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/113477.html

前端常見面試題（實戰遇到）

摘要：瀏覽器內核常用的塊元素和內聯元素數據類型語句前端優化方法會話跟蹤方法和區別循環輸出網站優化清除浮動方法，優缺點和區別截取長文本寫方法截取字符串響應式布局瀏覽器兼容正則表達式驗證身份證源碼自己如何封裝一個固定一個按鈕在右下角畫一個三角形同步和 1、瀏覽器內核2、常用的塊元素和內聯元素3、數據類型 *4、SQL語句5、前端優化方法 *6、會話跟蹤方法 *7、display ： none 和...

時飛 2019-08-23 16:13 評論0 收藏0
css-flex常見面試題

摘要：廢話不多說內容寬度等分左右布局，一側定寬，一側自適應撐滿固定寬度自適應寬度未知高寬上下左右居中未知高度上下左右居中這個效果就不展示了，可以做到未知寬高，和已知寬未知高的居中效果。廢話不多說！ flex-內容寬度等分 //css .box { display: flex; } .box div { ...

ZweiZhao 2019-08-30 15:55 評論0 收藏0
css-flex常見面試題

摘要：廢話不多說內容寬度等分左右布局，一側定寬，一側自適應撐滿固定寬度自適應寬度未知高寬上下左右居中未知高度上下左右居中這個效果就不展示了，可以做到未知寬高，和已知寬未知高的居中效果。廢話不多說！ flex-內容寬度等分 //css .box { display: flex; } .box div { ...

Godtoy 2019-08-02 14:12 評論0 收藏0
常見面試題之左邊固定，右邊自適應布局(四種方法：負邊距、flex)

摘要：這個布局是最簡單的布局之一，但是網絡上大多是，而沒有認真解釋以及用新的特性實現。這個布局是最簡單的布局之一，但是網絡上大多是copy，而沒有認真解釋以及用新的特性實現。下面就做一個新的概括. 要求：左邊固定100px, 右邊自適應左position:absolute, 右margin-left 入門寫法左邊固定1 左邊固定2 左邊固定3 右邊自適應1 右邊自適應...

hot_pot_Leo 2019-08-29 13:02 評論0 收藏0