css居中總結(jié)

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

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

一、水平居中系列

inline或者inline-*元素

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

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

一個(gè)塊級(jí)元素

.center{
 margin:0 auto;   
 }

多個(gè)塊級(jí)元素

使用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;
 }

塊級(jí)元素

知道塊級(jí)元素的高度

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

不知道塊級(jí)元素的高度

.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;
}

云服務(wù)器 GPU云服務(wù)器 html居中css 年終總結(jié) 網(wǎng)絡(luò)總結(jié) 方法總結(jié)

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/111960.html

相關(guān)文章

前端-CSS3&H5

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

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

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

gxyz 2019-08-30 15:55 評(píng)論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.我們可以通過(guò)給該元素的父級(jí)設(shè)置margin: 0 auto的方式來(lái)實(shí)現(xiàn)。HTML: ...

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

摘要：垂直居中表格布局法為什么就能垂直居中拜讀了張?chǎng)涡翊笊竦奈恼滦懈咧傅氖鞘裁葱懈咧傅氖俏谋拘械幕€間的距離。行內(nèi)框具有垂直居中性。 CSS水平居中、垂直居中、水平垂直居中方法總結(jié) 文字的水平居中: text-align:center; 單行文字的垂直居中： line-height:30px; height:30px; 讓有寬度的div水平居中： margin: 0 auto; width:...

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

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

BenCHou 2019-08-29 11:17 評(píng)論0 收藏0