（14）把「可以動的盒子」更優雅的展示——② 「居中」盒子

07-15

來自專欄 Oli的前端一萬小時

本知識學慣用時：4小時，總第68/10000小時

前言：讓「盒子」居中，在實際工作中可以說是隨時都會用到。方法很多，我們在都理解的基礎上用起來才能有的放矢、得心應手。

一、水平居中

① 在父元素上設置 text-align: center; 使文字/圖片水平居中：

.container { text-align: center;}

② margin

.container { width: 80%; margin-left: auto; margin-right: auto;}

二、垂直居中

① 居中 vs 不居中

html

<div class="ct"> <p>Hello,Oli的前端一萬小時</p> <p>Hello,Oli的前端一萬小時</p> </div>

css

.ct { padding: 40px 0;/*直接上下 padding 相等。整個容器的高度由內容高度撐開，我們大部分頁面都是這樣的。*/ text-align: center; background: #eee;}

② 絕對定位實現居中

打開一個頁面出現一個彈出框，那這個彈出框在頁面垂直居中。這個彈出框可能下邊還有東西，那這個彈出框很明顯就是絕對定位了。因為，如果他不是絕對定位，他怎麼去覆蓋其他元素呢！

但由於用戶的屏幕有大有小，那我都要讓這個彈出框居中，怎樣辦？

html

<body> <div class="dialog"> <div class="header">我是標題</div> <div class="content">我是內容</div> </div></body>

css

html,body { height: 100%;}.dialog { position: absolute; left: 50%; top: 50%;/* 由於用戶的屏幕有大有小，那我都要讓這個彈出框居中，怎樣辦？*//*left: 50% 表示 left 的值是它寬度的一半，所以它的這個「左上角」在水平位置上是居中的； top: 50% 表示這個「左上角」在他的頂部（從上到下）是居於 50% ，即這個「左上角」在頁面上居中。*/ margin-left: -200px; margin-top: -150px;/*但我們並不是需要這個「左上角」居中，而上想讓「中心」居中，因此我們用了「負 margin」: margin-left: -200px; 表示讓「左上角」再移動盒子「寬度」的一半； margin-top: -150px; 表示讓「左上角」再移動盒子「高度」的一半。*//*但以上的移動都是基於盒子「寬高」在一定的前提下，那如果「寬高」沒有固定，那怎麼實現居中呢？*//*答： transform: translate(-50%, -50%);這個屬性就是相對於自身「寬高」來做偏移，那這個時候，我不管裡邊的內容是多少，它整個都是居中的。他對「寬高」就沒有限制了。這種方式是最好的，在 IE9 以上都可以用的。*/ width: 400px; height: 300px; box-shadow: 0px 0px 3px #000;}.dialog .header{ padding: 10px; background: #000; color: #fff;}.dialog .content{ padding: 10px;}

③ vertical-align 實現居中

html

<body> <div class="box"> <img src="http://p20ssnusz.bkt.clouddn.com/Oli.png" alt=""> </div></body>

css

.box{ width: 300px; height: 200px; border: 1px solid ; text-align: center;/*這個屬性可以實現「水平」居中。*/}.box::before{/*用偽元素選擇器來實現「垂直」居中。*/ content: ; display: inline-block; height: 100%;/*使這個偽元素的高度等於盒子的高度，撐滿父容器。*/ vertical-align: middle;}.box img{ vertical-align: middle; background: blue;}

④ table-cell 實現居中

html

<body> <div class="box"> <img src="http://p20ssnusz.bkt.clouddn.com/Oli.png" alt=""> </div></body>

css

.box{ width: 300px; height: 200px; border: 1px solid ; display: table-cell; vertical-align: middle;/* vertical-align: middle 在表格元素中實現居中效果很明顯。但這裡 display: table-cell; 後，就不是一個塊級元素了，如果不加寬度，那麼寬度就會自動收縮！*/ text-align: center;}

⑤ display: flex 實現居中

html

<div class="space"> <div class="earth"></div></div>

css

.space { width: 100vw; height: 100vh; /* 設置寬高以顯示居中效果 */ display: flex; /* 彈性布局 */ align-items: center; /*告訴裡邊的盒子垂直方向上應該：垂直居中 */ justify-content: center; /*告訴裡邊的盒子水平方向上應該：水平居中 */}body { margin: 0; background: rgba(0, 0, 0, .95);}.earth::after { content: ??;/*注意這個「地球」看著像個圖片，但他實際上是一個文字。*/ font-size: 85px;}

後記：下一篇我們講「布局」，其實很多知識我們這連著的幾篇文章都涉及到了，下一篇我們就做一個總結，看看我們實際工作中都有哪些常用的「布局」方式。加油！

歡迎繼續關注下文：

（15）把這些「可以動的盒子」更和諧優雅的展示——③ 實際工作中最常用的「布局」

（本文版權歸「Oli的前端一萬小時」所有，轉載需說明來源）