CSS 實用技巧

2017 Simon Asika

UI/UX 線上讀書會

垂直置中

技巧一: Ghost Elements

.v-align-center {
  text-align: center;
}

.v-align-center::after {
  content: "";
  display: inline-block;
  height: 100%;
  width: 0;
  vertical-align: middle;
}

.v-align-center-inner {
  display: inline-block;
}

運用偽元素來將內部元素置中。

 

是目前最常見的垂直置中方法。

原理

假想有很多個高低不同的 inline-block 元素

這些元素會對齊最高的那個元素

皆設成垂直置中

原理

所以我們讓偽元素高度 100% ，寬度0即可

日常生活也常見到

嘗試對 img 設垂直置中，同一行的文字就會是這個樣子

技巧二: transform 指令

.v-align-center {
  position: relative;
}

.v-align-center-inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%);
}

用 position 定位的方式，將 top 設為 50%

 

再用 transformY 微調高度的 50% 回來

 

水平置中也可用

 

對老舊瀏覽器支援較差

技巧三: table-cell

.v-align-center {
  display: table-cell;
  vertical-align: middle;
  float: none;
}

常見的置中方法

背景壓暗

用 ::before 覆蓋在上方

.bg {
  position: relative;
  width: 100%;
  height: 300px;
  background: url(...) center center;
  background-size: cover;
  overflow: hidden;
}

.bg::before {
  position: absolute;
  top: 0;
  width: 100%;
  height: 400px;
  background-color: rgba(0,0,0,.5);
  content: "";
  display: block;
}

由於覆蓋元素的高度很難控制，我們可以設高一點，然後在上層元素加入 overflow: hidden

如果需要壓文字呢?

h1 {
  color: #fff;
  text-align: center;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
}

運用 relative 讓文字浮起來

Thank you

Made with Slides.com