css-元素居中

miqt 發(fā)布于2019-08-29 18:39 / 2288人閱讀

摘要：一水平居中行內(nèi)元素水平居中使用屬性可以實(shí)現(xiàn)在行內(nèi)元素包括在塊級(jí)父元素水平居中。使用負(fù)已知高度寬度使用使用使用三水平垂直居中公共結(jié)構(gòu)塊級(jí)元素垂直居中。

本文重要是匯總了關(guān)于水平居中，垂直居中，還有水平垂直居中的各種方法。

一、水平居中

1.行內(nèi)元素水平居中

使用text-align:center;屬性可以實(shí)現(xiàn)在行內(nèi)元素（包括：inline,inline-block、inline-table、inline-flex）在塊級(jí)父元素水平居中。

css樣式:

html結(jié)構(gòu)：

    我是inline


    我是inline-block


     我是inline-table


     我是inline-flex

2.塊級(jí)元素水平居中

塊級(jí)元素水平居中的方法有很多，下面會(huì)一一列舉：

a.將元素的左右外邊距設(shè)置為auto。

cssy樣式：
.child{
        margin: 0 auto;
  }

b.使用absolute+transdorm

 父元素相對(duì)定位，子元素絕對(duì)定位 left:50%，然后向左移動(dòng)子元素一般的寬度達(dá)到水平居中。

css樣式：

html結(jié)構(gòu)：

  使用absolute+transdorm

c.使用flex+justify-content
css3的flex布局具有兼容性問(wèn)題，使用需謹(jǐn)慎。

css樣式：

html結(jié)構(gòu)：

  flex+justify-content

d.使用flex+margin
父元素設(shè)為flex布局，在設(shè)置子元素居中

css樣式：

html結(jié)構(gòu)

  flex+margin

3.多個(gè)塊級(jí)元素水平居中

html結(jié)構(gòu)：

    多級(jí)塊元素水平居中
    多級(jí)塊元素水平居中
    多級(jí)塊元素水平居中

公用樣式
.parent{
        border: 1px solid rosybrown;
    }
   .chlid{
       width: 50px;
       background: papayawhip;
       margin-right: 10px;
   }

css樣式1——flex布局

css樣式2-inline-block + text-align: center

4.浮動(dòng)元素水平居中

公用html結(jié)構(gòu)：


   需要居中的子元素

1.定寬浮動(dòng)元素，通過(guò)relative+margin

css樣式：

2.不定寬，父子元素設(shè)置相對(duì)定位

css樣式：

3.利用flex布局（通用不管定寬還是不定寬）

5.絕對(duì)定位元素水平居中

 
    讓絕對(duì)定位的元素水平居中對(duì)齊。
  
  .parent{
        position:relative;
    }
   .child{
         position: absolute; /*絕對(duì)定位*/
         width: 200px;
         height:100px;
         background: yellow;
         margin: 0 auto; /*水平居中*/
         left: 0; /*此處不能省略，且為0*/
         right: 0;/*此處不能省略，且為0*/
    }

二、垂直居中

1. 單行內(nèi)聯(lián)元素垂直居中


     單行內(nèi)聯(lián)元素垂直居中。。

2.多行內(nèi)聯(lián)元素垂直居中

a.利用flex布局（flex）


    Dance like nobody is watching, code like everybody is.
    Dance like nobody is watching, code like everybody is.
    Dance like nobody is watching, code like everybody is.

3.塊級(jí)元素垂直居中

公共html結(jié)構(gòu)

    塊級(jí)元素垂直居中。

a.使用absolute+負(fù)margin(已知高度寬度)

 .parent {
   position: relative;
}
.child {
   position: absolute;  
   top: 50%;
   height: 100px;
   margin-top: -50px;
}

b.使用absolute+transform

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

c.使用flex+align-items

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

d.使用table-cell+vertical-align

 .parent {
    display: table-cell;
    vertical-align: middle;
  }

三、水平垂直居中

公共html結(jié)構(gòu)

    >塊級(jí)元素垂直居中。

方法一：絕對(duì)定位與負(fù)邊距實(shí)現(xiàn)（已知高度寬度）

 .parent {
   position: relative;
 }
 .child {
   position: absolute;
   top: 50%;
   left: 50%;
   margin: -50px 0 0 -50px;
 }

方法二：絕對(duì)定位與margin:auto （已知高度寬度）

.parent {
   position: relative;
   height:200px;//必須有個(gè)高度
}
.child {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   margin: auto;//注意此處的寫法
}

方法三：絕對(duì)定位+CSS3(未知元素的高寬)

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

方法四：flex布局

 .parent {
   height:200px;//必須有高度
   display: flex;
   justify-content: center;
   align-items: center;
 }

方法五：flex/grid與margin:auto

.parent {
  height:200px;//必須有高度
  display: grid;
}
.child {
  margin: auto;
}

GPU云服務(wù)器云服務(wù)器 html居中浮動(dòng)元素 html居中css css元素圖片居中

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

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

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

miqt

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

linux 文件傳輸協(xié)議

閱讀 2497·2021-11-23 09:51
edgeNAT：雙11優(yōu)惠，全場(chǎng)VPS月付8折年付7折，韓國(guó)LG/美西洛杉磯/Cera VPS實(shí)付4

閱讀 2541·2021-11-11 17:21
為什么說(shuō)超快恢復(fù)二極管MURF1040CT-ASEMI比普通二極管好

閱讀 3171·2021-09-04 16:45
Swiftnode：美國(guó)大帶寬不限流量高防服務(wù)器/Xeon E3-1230v5/32GB DDR4/

閱讀 2459·2021-08-09 13:42
css-元素居中

閱讀 2289·2019-08-29 18:39
CSS效果篇--純CSS+HTML實(shí)現(xiàn)checkbox的思路與實(shí)例

閱讀 2960·2019-08-29 14:12
footer保持在頁(yè)面底部的兩種方法

閱讀 1357·2019-08-29 13:49
通過(guò)案例理解position:relative和position:absolute

閱讀 3432·2019-08-29 11:17

亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

css-元素居中

相關(guān)文章

CSS居中完全指南——構(gòu)建CSS居中決策樹(shù)

CSS居中完全指南——構(gòu)建CSS居中決策樹(shù)

**【前端】這可能是你看過(guò)最全的css居中解決方案了~**

**【前端】這可能是你看過(guò)最全的css居中解決方案了~**

**【基礎(chǔ)】這15種CSS居中的方式，你都用過(guò)哪幾種？**

發(fā)表評(píng)論

0條評(píng)論

miqt

男|高級(jí)講師

TA的文章

linux 文件傳輸協(xié)議

edgeNAT：雙11優(yōu)惠，全場(chǎng)VPS月付8折年付7折，韓國(guó)LG/美西洛杉磯/Cera VPS實(shí)付4

為什么說(shuō)超快恢復(fù)二極管MURF1040CT-ASEMI比普通二極管好

Swiftnode：美國(guó)大帶寬不限流量高防服務(wù)器/Xeon E3-1230v5/32GB DDR4/