CSS——把“可以動的盒子”更優雅地展示:② “居中”盒子

itsOli發表於2019-05-07
本文推薦 PC 端閱讀~

本文版權歸 “公眾號 | 前端一萬小時” 所有,未經授權,請勿轉載!
複製程式碼

CSS——把“可以動的盒子”更優雅地展示:② “居中”盒子

css_13
複製程式碼

涉及面試題.png

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


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


1 水平居中

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

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

1.2 margin

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

2 垂直居中

2.1 居中 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;
}
複製程式碼

CSS——把“可以動的盒子”更優雅地展示:② “居中”盒子

2.2 絕對定位實現“彈窗”居中

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

但由於使用者的螢幕有大有小,但我都要讓這個彈出框居中,怎樣辦?
?原始碼及效果展示
html

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

css

html,body {
  height: 100%;
}

/*?註釋1️⃣*/
.dialog {
  position: absolute;
  left: 50%;
  top: 50%;
/* 由於使用者的螢幕有大有小,那我都要讓這個彈出框居中,怎樣辦?*/
/*left: 50% 表示 left 的值是它寬度的一半,所以它的這個“左上角”在
水平位置上是居中的;
   top: 50% 表示這個“左上角”在他的頂部(從上到下)是居於 50% ,即這個“左上
角”在頁面上居中。*/


/*?註釋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️⃣:

    彈出框放中間1.png

  • 註釋2️⃣:

    彈出框放中間2.png
    CSS——把“可以動的盒子”更優雅地展示:② “居中”盒子

2.3 偽元素實現居中

?原始碼及效果展示
html

<body>
  <div class="box">
    <img src="https://ws4.sinaimg.cn/large/006tNc79gy1g208frkqkhj30sk0kytk5.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;
}
複製程式碼

vertical-align 實現居中.png

2.4 table-cell 實現居中

?原始碼及效果展示
html

<body>
  <div class="box">
    <img src="https://ws4.sinaimg.cn/large/006tNc79gy1g208frkqkhj30sk0kytk5.jpg" 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;
}
複製程式碼

table-cell 實現居中.png

2.5 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;
}
複製程式碼


後記: 下一篇我們講“佈局”,其實很多知識我們這連著的幾篇文章都涉及到了,下一篇我們就做一個總結,看看我們實際工作中都有哪些常用的“佈局”方式。

加油!

相關文章