常見的div居中對齊方式

Karuru 發布于2019-08-29 13:18 / 3416人閱讀

摘要：前段時間面試的時候面試題里面對考察最多的就是居中對齊的問題，因此特地對居中對齊的方式做了一個簡單的總結，本文的目標就是希望各位在以后根據不同的情況使用不同的居中方式，閑話少說，直接上代碼布局實現父元素設置為使

前段時間面試的時候面試題里面對css考察最多的就是div居中對齊的問題，因此特地對div居中對齊的方式做了一個簡單的總結，本文的目標就是希望各位在以后根據不同的情況使用不同的居中方式，閑話少說，直接上代碼

Flex布局實現

.wrapper{
    display: flex;
    width: 500px;
    height: 500px;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    justify-content: center;
    align-items: center;
    background-color: #000;
}
.wrapper .inner{
    width: 300px;
    height: 300px;
    background-color: #666;
}

父元素display設置為flex,使用flexbox布局，在此布局下的元素就具備了伸縮的特性，再通過justify-content設置元素主軸上的對齊方式center,即可實現水平方向上的對齊，再利用align-items設置側軸上的對齊方式center,即可實現垂直方向上的對齊

流體特性

 .wrapper{
    position: relative;
    width: 500px;
    height: 500px;
    background-color: #000;
}
.wrapper .inner{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    width: 300px;
    height: 300px;
    background-color: #666;
}

當一個絕對定位元素，其對立方向屬性同時具有數值時，其流體特性就觸發了，margin當兩側的值都是auto時會平分剩余空間的大小，因此當四個方向都是auto時就可以實現水平和垂直方向的居中

transform平移

.wrapper{
    position: relative;
    width: 500px;
    height: 500px;
    background-color: #000;
}
.wrapper .inner{
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    width: 300px;
    height: 300px;
    background-color: #666;
}

已知寬高絕對定位

.wrapper{
    position: relative;
    width: 500px;
    height: 500px;
    background-color: #000;
}
.wrapper .inner{
    position: absolute;
    margin-top: 50%;
    margin-left: 50%;
    top: -150px;
    left: -150px;
    width: 300px;
    height: 300px;
    background-color: #666;
}

以上內容是個人的一點總結，如果有錯誤或不嚴謹的地方，歡迎批評指正，如果喜歡，歡迎點贊收藏

云服務器 GPU云服務器常見的數據存儲方式 div對齊圖片html居中對齊 html居中對齊h

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

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

常見的div居中對齊方式

摘要：前段時間面試的時候面試題里面對考察最多的就是居中對齊的問題，因此特地對居中對齊的方式做了一個簡單的總結，本文的目標就是希望各位在以后根據不同的情況使用不同的居中方式，閑話少說，直接上代碼布局實現父元素設置為使前段時間面試的時候面試題里面對css考察最多的就是div居中對齊的問題，因此特地對div居中對齊的方式做了一個簡單的總結，本文的目標就是希望各位在以后根據不同的情況使用不同的居中...

genedna 2019-08-01 17:33 評論0 收藏0
CSS用法的一些總結

摘要：黃金檔未垂直對齊同一行的一組為的使用了或者是時，如果某個的內部標簽中填充一些文字等內容，可能就會出現垂直不對齊的情況。解決方法倒不難的應用會被其他一些屬性破壞，例如和，所以與或是屬性最好不要同用。工作上，除了Django和一些并不復雜的腳本以外，其余時間寫了大量的CSS和jQuery，現在回頭看之前的一些代碼，寫得十分丑陋又低效，其中的CSS就有很大改進空間。正如多數人的認知一樣，H...

Anchorer 2019-08-28 18:10 評論0 收藏0
CSS元素垂直居中【內含vertical-align 與 line-height 屬性詳解】

摘要：所以文字最終可以在整個中垂直居中顯示。默認值為，即把元素放在父元素的基線上。萬萬沒想到用兩行代碼就實現了只要給容器加上下面兩條樣式，就成功垂直居中了，都是多余了的。請一定看到最后，flex太令人驚喜！ヾ(o???)? 入個門先來考慮這樣一個問題：一行文字在一個固定高度的父div中怎樣做到垂直居中？我們都知道設置父div的line-height 等于它的height就可以了，像下面...

frontoldman 2019-08-29 12:23 評論0 收藏0
CSS元素垂直居中【內含vertical-align 與 line-height 屬性詳解】

摘要：所以文字最終可以在整個中垂直居中顯示。默認值為，即把元素放在父元素的基線上。萬萬沒想到用兩行代碼就實現了只要給容器加上下面兩條樣式，就成功垂直居中了，都是多余了的。請一定看到最后，flex太令人驚喜！ヾ(o???)? 入個門先來考慮這樣一個問題：一行文字在一個固定高度的父div中怎樣做到垂直居中？我們都知道設置父div的line-height 等于它的height就可以了，像下面...

Sanchi 2019-08-01 16:40 評論0 收藏0
結合CSS3的布局新特征談談常見布局方法

摘要：案例圖片來自騰訊年的一道前段筆試題，有興趣的同學可以去看一下。騰訊前端面試稿布局布局指頁面布局像一張宣傳海報，以一張精美圖片作為頁面的設計中心。寫在前面最近看到《圖解CSS3》的布局部分，結合自己以前閱讀過的一些布局方面的知識，這里進行一次基于CSS2、3的各種布局的方法總結。常見的頁面布局在拿到設計稿時，作為一個前端人員，我們首先會做的應該是為設計圖大致地劃分區域，然后選擇一...

xuhong 2019-08-28 18:31 評論0 收藏0