<del id="8ci2k"></del>

css居中總結

supernavy 發布于2019-08-29 12:31 / 950人閱讀

摘要：一水平居中系列或者元素等有效一個塊級元素多個塊級元素使用和配合或者使用二垂直居中系列或者元素單行上下添加相等的內邊距多行可以模擬表格可以使用塊級元素知道塊級元素的高度不知道塊級元素的高度使用

一、水平居中系列

inline或者inline-*元素

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

inline、inline-block、inline-table、inline-flex等有效

一個塊級元素

.center{
 margin:0 auto;   
 }

多個塊級元素

使用inline-block和text-align配合或者使用flex

二、垂直居中系列

inline或者inline-*元素
1、單行：上下添加相等的內邊距

.link {
    padding-top: 30px;
    padding-bottom: 30px;
  }

2、多行：

// 可以模擬表格
.center-table{
  display:table;
}
.center-table children{
  display:table-cell;
  vertical-align:center;
}

// 可以使用flexbox
.flex-center-vertically {
  display: flex;
  justify-content: center;
  flex-direction: column;
  height: 400px;
 }

塊級元素

知道塊級元素的高度

.parent {
  position: relative;
 }
 .child {
   position: absolute;
   top: 50%;
   height: 100px;
   margin-top: -50px;                                
   box-sizing: border-box; */
 }

不知道塊級元素的高度

.parent {
     position: relative;
   }
   .child {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
   }

使用flexbox

.parent {
   display: flex;
   flex-direction: column;
   justify-content: center;
 }

三、居中（垂直和水平）

固定寬度和高度

.parent {
  position: relative;
}

.child {
  width: 300px;
  height: 100px;
  padding: 20px;

  position: absolute;
  top: 50%;
  left: 50%;

  margin: -70px 0 0 -170px;
}

不知道寬度和高度

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

使用flexbox

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

GPU云服務器云服務器 html居中css 年終總結網絡總結方法總結

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

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

前端-CSS3&H5

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

xiaolinbang 2019-08-29 14:14 評論0 收藏0
css居中總結

摘要：前言一直有個想法要把各種居中的方法總結一下，但還是一直沒有時間去整理。最近剛好在做樣式重構的項目，順便把一下自己有用過的或積累的居中方法給總結一下。又必須有個父級對其進行設置居中。前言一直有個想法要把各種居中的方法總結一下，但還是一直沒有時間去整理。最近剛好在做樣式重構的項目，順便把一下自己有用過的或積累的居中方法給總結一下。水平居中行內元素水平居中行內元素的居中比較簡單，直...

gxyz 2019-08-30 15:55 評論0 收藏0
CSS居中方法總結

摘要：此時檢查元素即可即可實現內層的實現了居中這種方式是最為我們熟知的，其缺點是需要設置子元素的寬度。交叉軸居中當設置了屬性時，主軸的方向會改變。垂直居中實現方案用的屬性，以及定位，與上面的水平居中類似，只是改為即可。水平居中實現方案確定寬度的元素水平居中 1.我們可以通過給該元素的父級設置margin: 0 auto的方式來實現。HTML: ...

ralap 2019-08-30 13:07 評論0 收藏0
CSS水平垂直居中總結

摘要：垂直居中表格布局法為什么就能垂直居中拜讀了張鑫旭大神的文章行高指的是什么行高指的是文本行的基線間的距離。行內框具有垂直居中性。 CSS水平居中、垂直居中、水平垂直居中方法總結文字的水平居中: text-align:center; 單行文字的垂直居中： line-height:30px; height:30px; 讓有寬度的div水平居中： margin: 0 auto; width:...

mist14 2019-08-30 13:13 評論0 收藏0
對css居中的一點總結

摘要：為了更好的加深對居中的理解，搜集和閱讀相關資料，發現不錯的文章將其整理出來。在學習前端的過程中，發現元素和文本的水平居中和垂直居中，是經常會出現的問題，在實際工作中也會經常碰到。居中的技巧有很多，但在編寫代碼的過程中，發現有時候技巧管用，有時候不管用，于是就將每個知道的方案都試一遍，找到合適的。這種情況究其原因是對居中的認識不夠深入，只是停留在實現需求的水平上。為了更好的加深對居中的...

BenCHou 2019-08-29 11:17 評論0 收藏0