css居中總結(jié)

supernavy 發(fā)布于2019-08-29 12:31 / 957人閱讀

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

一、水平居中系列

inline或者inline-*元素

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

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

一個(gè)塊級元素

.center{
 margin:0 auto;   
 }

多個(gè)塊級元素

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

二、垂直居中系列

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

.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云服務(wù)器云服務(wù)器 html居中css 年終總結(jié) 網(wǎng)絡(luò)總結(jié) 方法總結(jié)

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/111960.html

相關(guān)文章

前端-CSS3&H5

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

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

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

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

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

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

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

mist14 2019-08-30 13:13 評論0 收藏0
對css居中的一點(diǎn)總結(jié)

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

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