css垂直居中佈局總結

時間 2019-12-04

標籤 css 垂直居中佈局總結欄目 CSS 简体版

原文原文鏈接

簡介

總結記錄一下常常須要用到垂直居中佈局，歡迎補充(空手套。。。O(∩_∩)O)css

如下栗子若是未特別標註同一使用這樣的html結構html

<div class="container">
    <div class="content"></div>
</div>

垂直居中佈局

利用絕對定位和負margin

絕對定位能夠很容易作到top:50%，如今只要再讓目標元素上移自身高度的一半就垂直居中了css3

.container {
  background: #777777;
  height: 400px;
  position: relative;
}

.container .content {
  width: 100px;
  height: 100px;
  position: absolute;
  top: 50%;
  margin-top: -50px;
  left: 50%;
  margin-left: -50px;
  background: #ee5f28;
}

優勢：兼容性好
缺點：須要知道居中元素的高度瀏覽器

利用絕對定位和transform

.container {
  background: #777777;
  height: 400px;
  position: relative;
}

.container .content {
  width: 100px;
  height: 100px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  background: #ee5f28;
}

優勢：不須要考慮content元素的高度
缺點：兼容性

利用絕對定位和calc

.container {
  background: #777777;
  height: 400px;
  position: relative;
}

.container .content {
  width: 100px;
  height: 100px;
  position: absolute;
  top: calc(50% - 50px);
  left: calc(50% - 50px);
  background: #ee5f28;
}

優勢：相比於前面少了兩條樣式
缺點：兼容性

利用flex

.container {
  background: #777777;
  height: 400px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container .content {
  width: 100px;
  height: 100px;
  background: #ee5f28;
}

.container {
  background: #777777;
  height: 400px;
  display: flex;
}

.container .content {
  width: 100px;
  height: 100px;
  background: #ee5f28;
  margin: auto;
}

優勢：垂直居中特別容易搞定
缺點：兼容性

震驚absoulute（絕對定位）還能夠這樣用

.container {
  background: #777777;
  height: 400px;
  position: relative;
}

.container .content {
  width: 100px;
  height: 100px;
  background: #ee5f28;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

優勢：佈局

1.跨瀏覽器，兼容性好（無需hack，可兼顧IE8~IE10）；
2.無特殊標記，樣式更精簡；
3.自適應佈局，能夠使用百分比和最大最小高寬等樣式；
4.居中時不考慮元素的padding值（也不須要使用box-sizing樣式）；
5.佈局塊能夠自由調節大小；6.img的圖像也能夠使用
6.瀏覽器支持：Chrome、Firefox、Safari、Mobile Safari、IE8-10。「徹底居中」經測試能夠完美地應用在最新版本的Chrome、Firefox、Safari、Mobile Safari中，甚至也能夠運行在IE8~IE10上

使用inline-block

.container {
  background: #777777;
  height: 400px;
  text-align: center;
  font-size: 0;
  overflow: auto;
}

.container::after {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

.container .content {
  display: inline-block;
  vertical-align: middle;
  width: 100px;
  height: 100px;
  background: #ee5f28;
}

這裏注意：容器‘container’裏要設置font-size:0;避免inline-block之間產生間隔測試

優勢：flex

內容高度可變
內容溢出則能自動撐開父元素高度
瀏覽器兼容性好，甚至能夠調整支持IE7

使用table與table-cell

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    .container-table {
      background: #777777;
      height: 400px;
      width: 100%;
      display: table;
    }

    .container-table .container-cell {
      display: table-cell;
      vertical-align: middle;/* 這裏達到了垂直居中的效果 */
    }

    .container-table .container-cell .content {
      width: 100px;
      height: 100px;
      margin: 0 auto;/* 利用margin值 水平居中*/
      background: #ee5f28;
    }
  </style>
</head>

<body>
  <div class="container-table">
    <div class="container-cell">
      <div class="content"></div>
    </div>
  </div>
</body>

</html>

優勢：ui
- 內容高度可變
- 內容溢出則能自動撐開父元素高度
- 瀏覽器兼容性好
缺點：額外標籤

參考資料

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。