（13）把「能夠動的盒子」更優雅地展現：② 「居中」盒子 | CSS

時間 2020-02-08

標籤能夠盒子優雅展現居中 css 欄目 CSS 简体版

原文原文鏈接

原創：itsOli  @前端一萬小時

本文首發於公衆號「前端一萬小時」

本文版權歸做者全部，未經受權，請勿轉載！

本文節選自「語雀」私有專欄「前端一萬小時 | 從零基礎到輕鬆就業」
複製代碼

1. 如何讓塊級元素水平居中？如何讓行內元素水平居中？如何讓 inline-block 元素水平居中？
2. 垂直上下居中的辦法？
複製代碼

🙋上方面試題「參考答案詳解」，請點擊此處查看獲取方式！css

前言： 讓「盒子」居中，在實際工做中能夠說是隨時都會用到。html

方法不少，咱們在都理解的基礎上用起來纔能有的放矢、駕輕就熟。前端

1 水平居中

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

.container {
  text-align: center;
}
複製代碼

1.2 margin

.container {
  width: 80%;
  margin: 0 auto;
}
複製代碼

2 垂直居中

2.1 居中 vs 不居中

🔗源碼及效果展現
HTMLgit

<div class="ct">
  <p>Hello，前端一萬小時！</p>
  <p>Hello，前端一萬小時！</p>
</div>
複製代碼

CSSgithub

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

  text-align: center;
  background: #eee;
}
複製代碼

2.2 絕對定位實現「彈窗」居中

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

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

🔗源碼及效果展現
HTML佈局

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

CSSflex

html,body {
  height: 100%;
}

/* 🚀註釋1️⃣ */
.dialog {
  position: absolute;
  top: 50%;
  left: 50%;
  /* 因爲用戶的屏幕有大有小，那我都要讓這個彈出框居中，怎樣辦？ */
  /* top: 50% 表示這個「左上角」在他的頂部（從上到下）是居於 50% ，即這個「左上 角」在頁面上居中。 left: 50% 表示 left 的值是它寬度的一半，因此它的這個「左上角」在 水平位置上是居中的； */


  /* 🚀註釋2️⃣ */
  margin-left: -200px;
  margin-top: -150px;
  /* 但咱們並非須要這個「左上角」居中，而上想讓「中心」居中，所以咱們用了「負 margin」: margin-left: -200px; 表示讓「左上角」再移動盒子「寬度」的一半； margin-top: -150px; 表示讓「左上角」再移動盒子「高度」的一半。 請看「註釋1️⃣」的圖！ */


  /* ❓但以上的移動都是基於盒子「寬高」在必定的前提下， 那若是「寬高」沒有固定，那怎麼實現居中呢？ */
  /* 答： transform: translate(-50%, -50%); 這個屬性就是相對於自身「寬高」來作偏移，那這個時候， 我無論裏邊的內容是多少，它整個都是居中的。他對「寬高」就沒有限制了。 這種方式是最好的，在 IE9 以上均可以用的。 請看「註釋2️⃣」的圖！ */


  width: 400px;
  height: 300px;
  box-shadow: 0px 0px 3px #000;
}

.dialog .header {
  padding: 10px;
  background: #000;
  color: #fff;
}
.dialog .content {
  padding: 10px;
}
複製代碼

註釋1️⃣：

註釋2️⃣：

2.3 僞元素實現居中

🔗源碼及效果展現
HTMLui

<body>
  <div class="box">
    <img src="https://qdywxs.github.io/css-images/css13-img01.jpg" 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;
  width: 150px;
}
複製代碼

2.4 table-cell 實現居中

🔗源碼及效果展現
HTML

<body>
  <div class="box">
    <img src="https://qdywxs.github.io/css-images/css13-img01.jpg" alt="">
  </div>
</body>
複製代碼

CSS

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

  border: 1px solid ;
}

.box img {
  width: 150px;
}
複製代碼

2.5 `display: flex;` 實現居中

🔗源碼及效果展現
HTML

<div class="space">
  <div class="earth"></div>
</div>
複製代碼

CSS

.space {
  display: flex; 
   /* 彈性佈局 */

  width: 100vw;
  height: 100vh;  
  /* 設置寬高以顯示居中效果 */

  align-items: center; 
  /* 告訴裏邊的盒子垂直方向上應該：垂直居中 */

  justify-content: center;  
  /* 告訴裏邊的盒子水平方向上應該：水平居中 */
}

body {
  margin: 0;
  background: rgba(0, 0, 0, .95);
}

.earth::after {
  content: "🌏";
  /* 注意這個「地球」看着像個圖片，但他其實是一個文字。 */

  font-size: 85px;
}
複製代碼