欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

CSS3 不定高寬垂直水平居中的幾種方式

  發(fā)布時間：2020-03-26 16:27:54   作者：ToSmile   我要評論
這篇文章主要介紹了CSS3 不定高寬垂直水平居中的幾種方式,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

1、flex布局

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

這種方式兼容性不好

2、position + transform

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

IE9以下不支持transform屬性

3、table + table-cell

.father {
    display: table;
}
.son {
    display: table-cell;
    vertical-align: middle;
      text-align: center;
}

4、:before + display:inline-block

.father {
  text-align: center;
}
.father::before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
.son {
  display: inline-block;
}

到此這篇關于CSS3 不定高寬垂直水平居中的幾種方式的文章就介紹到這了,更多相關CSS3 不定高寬垂直水平居中內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持腳本之家！

相關文章

  • 使用CSS實現(xiàn)盒子水平垂直居中的方法(8種)

    這篇文章主要介紹了使用CSS實現(xiàn)盒子水平垂直居中的方法(8種)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來
    2020-11-11

  • CSS 水平居中并限定最大的寬度實現(xiàn)

    這篇文章主要介紹了CSS 水平居中并限定最大的寬度實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學
    2020-09-14

  • CSS實現(xiàn)子元素div水平垂直居中的示例

    這篇文章主要介紹了CSS實現(xiàn)子元素div水平垂直居中的示例,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起
    2020-09-03

  • CSS中的translate(-50%,-50%)實現(xiàn)水平垂直居中效果

    這篇文章主要介紹了CSS中的translate(-50%,-50%)實現(xiàn)水平垂直居中效果,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以
    2020-09-02

  • css3 flex實現(xiàn)div內容水平垂直居中的幾種方法

    這篇文章主要介紹了css3 flex實現(xiàn)div內容水平垂直居中的幾種方法,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小
    2020-03-27

  • CSS3實現(xiàn)水平居中、垂直居中、水平垂直居中的實例代碼

    在前端面試中經常會遇到css居中效果的實現(xiàn)，今天小編給大家分享幾種css垂直水平居中的方法，通過實例代碼給大家講解，需要的朋友參考下吧
    2020-02-27

  • 手把手教你CSS水平、垂直居中的10種方式(小結)

    這篇文章主要介紹了手把手教你CSS水平、垂直居中的10種方式(小結)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著
    2019-11-07

  • web前端之css水平居中代碼解析

    如何讓子元素在父容器中水平垂直居中呢，下面我們來列舉幾種常見的方法，通過真實場景分析給大家詳解web前端之css水平居中代碼解析，感興趣的朋友跟隨小編一起看看吧
    2021-05-20

最新評論