一个少妇满足三个老头在线观看,锕锕锕锕锕锕锕好痛视频,亚洲人成网站在线播放2019

<center id="pt2l2"></center>
<tr id="pt2l2"></tr>
  • <big id="pt2l2"></big>

        CSS中垂直居中的七種方法

        前言:

        我們在編輯一個版面,通常都會用到水平居中和垂直居中來設計,而水平居中很好處理,不外乎就是設定margin:0 auto;或是text-align:center;,就可以輕松解決掉水平居中的問題,但一直以來最麻煩對齊問題,都是“垂直居中”這個討人厭的設定,以下將介紹七種單純利用CSS垂直居中的方式。

        七種垂直居中的方法 :

        設定行高(line-height)

        添加偽元素

        calc動態計算

        使用表格或假裝表格

        transform

        絕對定位

        使用Flexbox

        設定行高(line-height):

               設定行高是垂直居中最簡單的方式,適用于“單行”的“行內元素”(inline、inline-block),例如單行的標題,或是已經設為inline-block屬性的div,若將line-height設成和高度一樣的數值,則內容的行內元素就會被垂直居中,因為是行高,所以會在行內元素的上下都加上行高的1/2,所以就垂直居中了!不過由此就可以看出,為什么必須要單行的行內元素,因為如果多行,第二行與第一行的間距會變超大,就不是我們所期望的效果了。

        CSS示例:

        .div0{
          width:200px;
          height:150px;
          border:1px solid #000;
          line-height:150px;
          text-align:center;
        }
        .redbox{
          display:inline-block;
          width:30px;
          height:30px;
          background:#c00;
        }

         添加偽元素(::before、::after)

               第一種方法,雖然是最簡單的方法(適用于單行標題),不過就是只能單行,所以我們如果要讓多行的元素也可以垂直居中,就必須要使用偽元素的方式。在此之前,先解釋一下CSS里頭vertical-align這個屬性,這個屬性雖然是垂直居中,不過卻是指在元素內的所有元素垂直位置互相居中,并不是相對于外框的高度垂直居中。(下面的CSS會造成這種樣子的垂直居中)  

        .div0{
          width:200px;
          height:150px;
          border:1px solid #000;
          text-align:center;
        }
        .redbox{
          width:30px;
          height:30px;
          background:#c00;
          display:inline-block;
          vertical-align:middle;
        }
        .greenbox{
          width:30px;
          height:60px;
          background:#0c0;
          display:inline-block;
          vertical-align:middle;
        }
        .bluebox{
          width:30px;
          height:40px;
          background:#00f;
          display:inline-block;
          vertical-align:middle;
        }

         因此,如果有一個方塊變成了高度100%,那么其他的方塊就會真正的垂直居中

        .greenbox{
          width:30px;
          height:100%;
          background:#0c0;
          display:inline-block;
          vertical-align:middle;
        }

               但是我們總不能每次要垂直居中,都要添加一個奇怪的div在里頭吧!所以我們就要把腦筋動到“偽元素”身上,利用::before和::after添加div進到杠杠內,讓這個“偽”div的高度100%,就可以輕松地讓其他的div都居中。不過不過不過!div記得要把display設為inline-block,畢竟vertical-align:middle;是針對行內元素,div本身是block,所以必須要做更改!

        .div0::before{
          content:'';
          width:0;
          height:100%;
          display:inline-block;
          position:relative;
          vertical-align:middle;
          background:#f00;
        }

         calc動態計算

               看到這邊或許會有疑問,如果今天我的div必須要是block,我該怎么讓它垂直居中呢?這時候就必須用到CSS特有的calc動態計算的能力,我們只要讓要居中的div的top屬性,與上方的距離是“50%的外框高度+ 50%的div高度”,就可以做到垂直居中,至于為什么不用margin-top,因為margin相對的是水平寬度,必須要用top才會正確。

        .div0{
          width:200px;
          height:150px;
          border:1px solid #000;
        }
        .redbox{
          width:30px;
          height:30px;
          background:#c00;
          float:left;
          top:calc(50% - 15px);
          margin-left:calc(50% - 45px);
        }
        .greenbox{
          width:30px;
          height:80px;
          background:#0c0;
          float:left;
          top:calc(50% - 40px);
        }
        .bluebox{
          width:30px;
          height:40px;
          background:#00f;
          float:left;
          top:calc(50% - 20px);
        }

        使用表格或假裝表格 

               或許有些人會發現,在表格這個HTML里面常用的DOM里頭,要實現垂直居中是相當容易的,只需要下一行vertical-align:middle就可以,為什么呢?最主要的原因就在于table的display是table,而td的display是table-cell,所以我們除了直接使用表格之外,也可以將要垂直居中元素的父元素的display改為table-cell,就可以輕松達成,不過修改display有時候也會造成其他樣式屬性的連動影響,需要比較小心使用。

        HTML:

        <table>
            <tr>
                <td>
                    <div>表格垂直居中</div>
                </td>
            </tr>
        </table>
        <div class="like-table">
            <div>假的表格垂直居中</div>
        </div>

        CSS:

        .like-table{
            display:table-cell;
        }
        td,
        .like-table{
            width:150px;
            height:100px;
            border:1px solid #000;
            vertical-align: middle;
        }
        td div,
        .like-table div{
            width:100px;
            height:50px;
            margin:0 auto;
            color:#fff;
            font-size:12px;
            line-height: 50px;
            text-align: center;
            background:#c00;
        }
        .like-table div{
            background:#069;
        }

         transform

             transform是CSS3的新屬性,主要掌管元素的變形、旋轉和位移,利用transform里頭的translateY(改變垂直的位移,如果使用百分比為單位,則是以元素本身的長寬為基準),搭配元素本身的top屬性,就可以做出垂直居中的效果,比較需要注意的地方是,子元素必須要加上position:relative,不然就會沒有效果。

        .use-transform{
            width:200px;
            height:200px;
            border:1px solid #000;
        }
        .use-transform div{
            position: relative;
            width:100px;
            height:50px;
            top:50%;
            transform:translateY(-50%);
            background:#095;
        }

        絕對定位: 

               絕對定位就是CSS里頭的position:absolute,利用絕對位置來指定,但垂直居中的做法又和我們正統的絕對位置不太相同,是要將上下左右的數值都設為0,再搭配一個margin:auto,就可以辦到垂直居中,不過要特別注意的是,設定絕對定位的子元素,其父元素的position必須要指定為relative!而且絕對定位的元素是會互相覆蓋的,所以如果內容元素較多,可能就會有些問題

        .use-absolute{
            position: relative;
            width:200px;
            height:150px;
            border:1px solid #000;
        }
        .use-absolute div{
            position: absolute;
            width:100px;
            height:50px;
            top:0;
            right:0;
            bottom:0;
            left:0;
            margin:auto;
            background:#f60;
        }

        使用Flexbox 

        使用align-items或justify-content的屬性,輕輕松松就可以做到垂直居中的效果。

        .use-flexbox{
            display:flex;
            align-items:center;
            justify-content:center;
            width:200px;
            height:150px;
            border:1px solid #000;
        }
        .use-flexbox div{
            width:100px;
            height:50px;
            background:#099;
        }

        以上就是一些垂直居中的方法,由于垂直居中往往會動用到修改display這個屬性,往往也會在排版上造成一些影響,例如不該用flexbox的地方如果用了flexbox,不該用table的地方用了table,不該用inline-block的地方用了inline-block,后續反而要多寫許多其他的定位樣式來修正,那就有點本末倒置了,因此如何活用這些CSS垂直居中的方法,就要看大家的版面結構而靈活運用!

        ————————————————

        版權聲明:本文為CSDN博主「阿昊在」的原創文章,遵循CC 4.0 BY-SA版權協議,轉載請附上原文出處鏈接及本聲明。

        原文鏈接:https://blog.csdn.net/m0_48982503/article/details/120558940


        若文章對您有幫助,幫忙點個贊!

        0
        0
        發布時間 2022-09-04 10:54:11
        0 條回復(回復會通過微信通知作者)
        點擊加載更多評論
        登錄 后再進行評論
        (微信掃碼即可登錄,無需注冊)
        一个少妇满足三个老头在线观看,锕锕锕锕锕锕锕好痛视频,亚洲人成网站在线播放2019