常見布局方法總結-居中布局

JowayYoung 發布于2019-08-01 16:13 / 1087人閱讀

摘要：常見布局方法總結水平居中布局使用場景頁面整體水平居中，有具體寬度要求。

常見布局方法總結 水平居中布局

(1) width: (xxx)px; margin: 0 auto;

使用場景：頁面整體水平居中，有具體寬度要求。

.content {
  width:1000px;
  height:100px;
  background:red;
  margin:0 auto;
}

(2) text-align: center; display: inline-block;

使用場景：子元素有多個且需要水平居中排列

.wrap {
  text-align: center;
}
.content {
  display: inline-block;
  width: 100px;
  height: 100px;
  background: red;
}

(3) absolute+left:50%+margin-left:-width/2

使用場景：子元素寬度確定，子元素之間互不影響


  
    快過年了快過年了快過年了快過年了快過年了快過年了快過年了

.wrap {
  position: relative;
}
.content {
  position: absolute;
  left: 50%;
  width: 200px;
  height: 100px;
  margin-left: -100px;
  background: red;
}

(4) absolute+left:50%+translateX(-50%)

使用場景：子元素寬度不確定，支持css3的translate屬性，子元素之間互不影響


  
    快過年了快過年了快過年了快過年了快過年了快過年了快過年了

.wrap {
  position: relative;
}
.content {
  position: absolute;
  left: 50%;
  height: 100px;
  background: red;
  transform: translateX(-50%);
}

(5) flex布局

使用場景: 支持flex布局方式的瀏覽器都可以使用此布局，結合了(2)(4)兩種方法的優點，無需考慮子元素寬度，且支持多個子元素居中


  
    快過年了快過年了快過年了快過年了快過年了快過年了快過年了

.wrap {
  display: flex;
  justify-content: center;
}
.content {
  height: 100px;
  background: red;
}

垂直居中布局

相比水平居中布局，垂直居中稍微坑了一點，實現方法并沒有靈活。

(1)table-cell布局
使用場景：多行文字上下居中


  
    快過年了快過年了快過年了快過年了快過年了快過年了快過年了

.wrap {
  display: table-cell;
  vertical-align: middle;
  height: 200px;
}
.content {
  width: 100px;
  background: red;
}

(2)absolute+top:50%+margin-top:-height/2
使用場景：與水平居中一樣，適用于子元素高度確定，不會對其他子元素造成影響的情況下的上下居中,由于是絕對定位，父元素需要占據空間，若沒有其他子元素，需設置一個高度

.wrap {
  position: relative;
  height: 200px;
}
.content {
  position: absolute;
  top: 50%;
  width: 300px;
  height: 100px;
  margin-top: -50px;
  background: red;
}

(3) absolute+top:50%+translateY(-50%)
使用場景：與水平居中一樣，適用于子元素高度不確定，不會對其他子元素造成影響的情況下的上下居中,由于是絕對定位，父元素需要占據空間，若沒有其他子元素，需設置一個高度

.wrap {
  position: relative;
  height: 200px;
}
.content {
  position: absolute;
  top:50%;
  background: red;
  transform: translateY(-50%);
}

(4) flex布局

使用場景: 支持flex布局方式的瀏覽器都可以使用此布局，無需考慮子元素高度，書寫簡便快捷


  
    快過年了快過年了快過年了快過年了快過年了快過年了快過年了

.wrap {
  display: flex;
  align-items: center;
  height: 200px;
}
.content {
  background: red;
}

云服務器 GPU云服務器布局居中水平居中布局 div布局布局html 排版布局

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/50374.html

常見布局方法總結-居中布局

摘要：常見布局方法總結水平居中布局使用場景頁面整體水平居中，有具體寬度要求。常見布局方法總結水平居中布局 (1) width: (xxx)px; margin: 0 auto; 使用場景：頁面整體水平居中，有具體寬度要求。 showImg(https://segmentfault.com/img/bVH7rO?w=1347&h=216); .content { width:...

Wuv1Up 2019-08-30 13:21 評論0 收藏0
前端-CSS3&H5

摘要：高度模型淺識為的簡寫，簡稱為塊級格式化上下文，為瀏覽器渲染某一區域的機制，中只有和中還增加了和。并非所有的布局都會在開發中使用，但是其中也會涉及一些知識點。然而在不同的純制作各種圖形純制作各種圖形多圖預警一勞永逸的搞定 flex 布局尋根溯源話布局一切都始于這樣一個問題：怎樣通過 CSS 簡單而優雅的實現水平、垂直同時居中。記得剛開始學習 CSS 的時候，看到 float 屬性不...

xiaolinbang 2019-08-29 14:14 評論0 收藏0
CSS布局十八般武藝都在這里了

摘要：清單一些說明注意文檔的書寫順序，先寫兩側欄，再寫主面板，更換后則側欄會被擠到下一列圣杯布局和雙飛翼布局都會用到。可以通過設置的屬性或使用雙飛翼布局避免問題。雙飛翼布局不用設置相對布局，以及對應的和值。本文首發于知乎專欄：前端指南 CSS布局布局是CSS中一個重要部分，本文總結了CSS布局中的常用技巧，包括常用的水平居中、垂直居中方法，以及單列布局、多列布局的多種實現方式（包括傳統的...

includecmath 2019-08-29 12:17 評論0 收藏0
css--布局

摘要：布局方式布局的傳統解決方案，基于盒狀模型，依賴屬性屬性屬性。它對于那些特殊布局非常不方便，比如，垂直居中就不容易實現。關于布局，當然肯定還有更多的更好的方法。接觸前端開發也有半年了，每當需要將一個空白的紙，畫成一個頁面的時候，總會出現不知所措的幾秒鐘。除了因為對css中的各種屬性的不熟練之外，更難為人的是怎么簡練的將這些屬性排列組合起來。其實靜下心來，仔細想一想，無非就是整體-->局...

Nino 2019-08-30 12:43 評論0 收藏0