国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

css實現垂直居中的幾種方式

187J3X1 / 2112人閱讀

摘要：單行文本使用我是垂直居中文本使用我是垂直居中文本父元素子元素高度確定高度確定將設置為本元素高度的一半父元素子元素高度不確定我會絕對居中額外元素與上兩個原理一樣多設置了一個額外元素，使額外元素的為為元素的高度的負一半使用

1.單行文本使用line-height


  
我是垂直居中文本




//css
child{
 line-height: 100px;
}

2.使用table-cell+vertical-align


  
我是垂直居中文本




//css
.parent{
  display: table-cell;
  height: 100px;
  vertical-align: middle;
}

3.父元素、子元素高度確定高度確定position+margin


  




//css  將margin-top設置為本元素高度的一半
.parent{
  position: relative;
  width: 200px;
  height: 100px;
  background: red;
}
.child{
  position: absolute;
  width: 100%;
  height: 30px;
  top: 50%;
  margin-top: -15px;
  background: green;
}

4.父元素、子元素高度不確定


  
我會絕對居中




//css
.parent{
  position: relative;
  background: red;
  width: 200px;
  height: 100px;
}
.child{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: green;
}

5.額外元素+margin,與上兩個原理一樣；多設置了一個額外元素，使額外元素的height為50%,margin-bottom為center元素的高度的負一半-(height + padding)/2


    

    



//css
.parent{
    width: 200px;
    height: 100px;
    background: green;
}
.floater{
    height: 50%;
    margin-bottom: -25px;
}
.child{
    width: 50px;
    height: 50px;
    background: red;
}

6.使用flex

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

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

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

相關文章

  • (面試題)垂直居中的幾種實現方式

    摘要：尤其是在實際頁面中，有很多特殊的場景，導致水平居中實現起來比較麻煩。這篇文章旨在紀錄一些我知道的居中方式。以一道經典面試題為例一個的在一個水平垂直居中，用實現。首先定義元素層和垂直居中無關的樣式直接定義在里。 相比較水平居中，垂直居中比較復雜點。尤其是在實際頁面中，有很多特殊的場景，導致水平居中實現起來比較麻煩。這篇文章旨在紀錄一些我知道的居中方式。以一道經典面試題為例：一個200*2...

    cheukyin 評論0 收藏0

  • CSS - 實現垂直居中的幾種方式

    摘要：元素為未知寬高的元素和元素為為定寬定高自身包含尺寸的元素的元素絕對定位和負邊距絕對定位和原理當一個絕對定位元素，其對立定位方向屬性同時有具體定位數值的時候，流體特性，具有流體特性絕對定位元素的的填充規則和普通流體元素一模一樣參考 1. 元素為未知寬高的元素flexhttp://www.ruanyifeng.com/blo... display: flex; justify-conten...

    light 評論0 收藏0

  • 純CSS實現垂直居中的幾種方法

    摘要：垂直居中是布局中十分常見的效果之一，為實現良好的兼容性，端實現垂直居中的方法一般是通過絕對定位，，負邊距等方法。有了，針對移動端的垂直居中就更加多樣化。方法這實際上是方法的變形，移位是通過來實現的。 垂直居中是布局中十分常見的效果之一，為實現良好的兼容性，PC端實現垂直居中的方法一般是通過絕對定位，table-cell，負邊距等方法。有了css3，針對移動端的垂直居中就更加多樣化。 方...

    FullStackDeveloper 評論0 收藏0

  • 純CSS實現垂直居中的幾種方法

    摘要：垂直居中是布局中十分常見的效果之一，為實現良好的兼容性，端實現垂直居中的方法一般是通過絕對定位，，負邊距等方法。有了，針對移動端的垂直居中就更加多樣化。方法這實際上是方法的變形，移位是通過來實現的。 垂直居中是布局中十分常見的效果之一，為實現良好的兼容性，PC端實現垂直居中的方法一般是通過絕對定位，table-cell，負邊距等方法。有了css3，針對移動端的垂直居中就更加多樣化。 方...

    sourcenode 評論0 收藏0

  • 使一個div垂直+水平居中的幾種方法

    摘要：前幾天去一家互聯網公司面試，面試官問到了這個應該算是比較簡單的問題，在我自認為回答正確時，才知道這道題的答案有很多種，下面就讓我們一起來探討一下這個問題思路絕對定位居中原始版這個是我回答出來的，也是被各位所熟知的一種方法，設外層相對定位，內 前幾天去一家互聯網公司面試，面試官問到了這個應該算是比較簡單的問題，在我自認為回答正確時，才知道這道題的答案有很多種，下面就讓我們一起來探討一下這...

    joyqi 評論0 收藏0

發表評論

0條評論

187J3X1

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<