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

.水平居中的 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>

我自己是一名從事了多年開發的web前端老程序員，目前辭職在做自己的web前端私人定制課程，去年我花了一個月整理了一份最適合2019年學習的web前端學習干貨，各種框架都有整理，送給每一位前端小伙伴，想要獲取的可以關注我的頭條號并在后臺私信我：前端，即可免費獲取。

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

img的display：inline-block；類似一樣在不受float影響下進行實在父元素上添加效果讓它進行水平居中

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

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

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>

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>

5.水平垂直居中（三）絕對定位和transfrom
這個方法比較高級了，用到了形變，據我所知很多大神喜歡使用這個方法進行定位，逼格很高的，學會后面試一定要用！這個是不需要知道居中元素的寬高就可以使用的，代碼里的圖片稍微有點大，改改寬高，僅此而已，在面試中大部分人會問如果不知道寬高該如何居中，答這個，加分！對transform不了解的同學可以查閱一下資料了解一下！

<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" >
        ![](4.jpg)
    </div>
</body>

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>

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>

8.水平垂直居中（六）利用vertical-align:middle;
這方法不常見，但是一位朋友補充后我覺得也不失為一種好方法可以讓別人刮目相看，這個方法關鍵要有一個和容器一樣高的元素作為居中的一個參照就像b元素一樣

<style>
    .wrap{
            width:300px;
            height:300px; 
            background:rgba(0,0,0,0.5);
            text-align:center;
            font-size:0;
            }
    .vamb{
        display:inline-block; 
        width:0px;
        height:100%;
        vertical-align:middle;
        }
    .test{
        display:inline-block;
        vertical-align:middle;
        font-size:16px;
        text-align:left;
        background:red;
        }
</style>
<body>
    <div class="wrap">
        <b class="vamb"></b>
        <div class="test">
        寬高不定<br>
        垂直水平居中
        </div>
    </div>
</body>

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

作者：coderLfy鏈接：https://www.jianshu.com/p/a7552ce07c88

SS中文字居中顯示的方式有以下五種：

使用text-align屬性設置文本的對齊方式

將text-align屬性值設置為center可以將文本居中顯示。

.center {
  text-align: center;
}

使用vertical-align屬性設置元素的垂直對齊方式

將vertical-align屬性值設置為middle可以將文本垂直居中顯示。

.center {
  vertical-align: middle;
}

使用line-height屬性設置行高

將line-height屬性值設置為比字體大小略大的值，可以使文本在容器中垂直居中顯示。

.center {
  line-height: 20px;
}

使用display

display: flex屬性將父元素設置為彈性布局，并使用align-items: center屬性將子元素在交叉軸上居中對齊。

.center {
  display: flex;
  align-items: center;
}

使用position

position: absolute屬性和transform: translateY(-50%)將子元素相對于其父元素垂直居中對齊。

// 父容器
.center {
  position: relative;
  height: 200px;
}

// 子容器
.center > div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  height: 100px;
  width: 200px;
  background-color: #ccc;
}

以上就是CSS中文字居中顯示的幾種方式，根據實際需求選擇合適的方式即可。

SS控制居中是前端開發中非常常用的布局技能，本文列出幾種CSS控制元素居中的幾種方法。

談及HTML元素居中展示，涉及到水平居中和垂直居中，以及水平垂直居中。由于HTML文檔流是水平方向的，所以水平方向上的布局控制比垂直方向要簡單很多，居中也是如此。不過（水平）垂直居中還是有很多種寫法，至少一只手是數不過來了，本文列出幾種，并進行簡單比較。

一、水平居中

使用CSS控制水平居中很簡單：

塊級元素設置width,并設置margin auto
內聯元素父元素設置text-align center
HTML代碼如下:

<div class="container">
 <div class="content">
 水平居中哦
 </div>
</div>

1. 塊級元素水平居中

.container {
 height: 300px;
 width: 300px;
 border: 1px solid red;
}
.content {
 width: 10rem;
 border: 1px solid green;
 margin: 0 auto;
}

效果：

2. 內聯元素水平居中

.container {
 height: 300px;
 width: 300px;
 border: 1px solid red;
 text-align: center;
}
.content {
 display: inline-block;
 border: 1px solid green;
}

效果：

代碼很簡單，而且沒什么兼容性問題，所以通常也不需要用別的復雜方式來實現水平居中效果。

二、水平垂直居中

使用CSS控制垂直居中（或者水平垂直居中）就不像控制垂直居中那么方便，這里主要羅列幾種。

1. flex布局

flex布局出現以后，垂直居中就很方便了，直接設置父元素：

display flex
align-items center

如果同時要水平居中，則同時設置：

justify-content center

需要注意的是IE10+才支持，webkit前綴瀏覽器設置flex屬性需要加webkit。

.container {
 width: 300px;
 height: 300px;
 border: 1px solid red;
 display: -webkit-flex;
 display: flex; // 關鍵屬性
 align-items: center;　// 垂直居中
 justify-content: center // 水平居中
}
.content {
 border: 1px solid green;
}

2. margin+ position:absolute布局

position: absolute布局的元素，通過設置top/bottom, left/right這兩對屬性，可以讓元素在垂直方向和水平方向分別具有了自適應的特性。就像div在水平方向的默認表現一樣!

上文中對于塊級元素的水平居中，我們設置寬度然后配合以margin可以實現水平居中。而對于設置了top/bottom,left/right的absolute定位元素，我們設置寬高再配合margin就可以達到水平垂直居中：

.container {
 width: 300px;
 height: 300px;
 position: relative;
 border: 1px solid red;
}
.content {
 position: absolute;
 left: 0;
 right: 0;
 top: 0;
 bottom: 0;
 width: 200px;
 height: 100px;
 margin: auto;
 border: 1px solid green;
}

效果：

兼容性很好，IE8以上支持。

3. transform + absolute

absolute定位元素的left、top屬性是子元素的左邊界、上邊界相對父元素進行定位；transform是CSS3中非常強大的一個屬性，可以接收多個屬性值，包括旋轉、縮放、平移等多種功能。這里使用二者配合，先將子元素左上定點定位到父元素中心點，再使用transform將子元素中心點移動到父元素的中心點即可：

.container {
 width: 300px;
 height: 300px;
 position: relative;
 border: 1px solid red;
}
.content {
 position: absolute;
 left: 50%;
 top: 50%;
 transform: translate(-50%, -50%); 
 border: 1px solid green;
}

效果：

這個方法有個小缺陷，就是translate函數的參數，最后的計算值不能為小數，否則有的瀏覽器渲染出來效果會模糊，所以使用本方法的話最好設置一下寬高為偶數。

4. absolute+margin負值

與上一種方法很類似，上一種方法是使用transform將元素向左上平移，本方法則是使用margin負值的方式將元素拉向左上角。

代碼：

.container {
 width: 300px;
 height: 300px;
 position: relative;
 border: 1px solid red;
}
.content {
 position: absolute;
 left: 50%;
 top: 50%;
 width: 200px;
 height: 100px;
 margin-top: -50px;
 margin-left: -100px;
 border: 1px solid green;
}

效果：

5. absolute + calc

從上兩種方法可以看到，absolute設置了left和top再通過平移或者margin將元素重新定位回去。如果我們直接可以計算出正確的left和top值，豈不是一次到位？calc函數正有此功能，當然我們需要知道子元素的寬高：

.container {
 width: 300px;
 height: 300px;
 border: 1px solid red;
 text-align: center;
 position: relative;
}
.content {
 position: absolute;
 border: 1px solid green;
 width: 200px;
 height: 100px;
 left: calc(50% - 100px);
 top: calc(50% - 50px);
}

效果：

6. line-height + vertical-align

vertical-align是一個作用于內聯元素的屬性。內聯元素的特性是會和其它內聯元素或者文字在同一行顯示，但是默認情況下是與父元素“基線對齊”的。這里的的基線指的是父元素每一行中的一個垂直位置，是英文ｘ下邊緣所在的水平, 通過設置vertical-align為middle可以將內聯元素的中部對齊父元素的中部（基線+字母ｘ的一半高度）。所以可以利用這一點，將父元素的行高設置為其自身高度，然后將子元素與父元素中線對齊，即可實現垂直居中。

代碼：

.container {
 width: 300px;
 height: 300px;
 border: 1px solid red;
 line-height: 300px;
 text-align: center;
}
.content {
 display: inline-block;
 line-height: 1.5;
 border: 1px solid green;
 vertical-align: middle;
}

效果：

以上幾種方法各有不同的適用條件，因此也有不同的優缺點，下表對各種方法進行了比較：

方法條件兼容性flex布局無IE10+margin + absolute知道子元素寬高IE8+transform + absolute無，子元素寬高應為偶數IE10+absolute + margin負值知道子元素寬高absolute + calc知道子元素寬高IE9+line-height + vertical-align知道父元素寬高

CSS中同一種表現效果往往有多種不同的實現方法，要刻意地嘗試多種寫法，避免熟悉了一兩種方法就止步不前，這樣才能對各種情況得心應手

在線咨詢

上一篇：統計列表（list）中每個元素出現的次數
下一篇：好程序員HTML5大前端常用開發工具大集合

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。