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

cheukyin 發布于2019-08-30 11:18 / 1826人閱讀

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

相比較水平居中，垂直居中比較復雜點。尤其是在實際頁面中，有很多特殊的場景，導致水平居中實現起來比較麻煩。這篇文章旨在紀錄一些我知道的居中方式。以一道經典面試題為例：一個200*200的div在一個div水平垂直居中，用css實現。

首先定義元素

1.百分比的方式

缺點：必須知道居中元素的實際大小。根據實際大小用margin進行調整，因為top，left是以元素的上邊框進行計算的。

2.百分比結合transform

優點：利用transform改良上面那種必須知道元素大小的限制。

3.flex布局

Flex布局(彈性布局)，作為css3新增的布局方式，能很好的支持不同的屏幕大小，絕對是現在的前端工程師必備技能。

4.flex布局結合margin

    .margin{
            display: flex;
        }
        
    .center{
            margin: auto;
        }

5.絕對定位和0

    .margin{
            position: relative;
        }

    .center{
            overflow: auto;
            margin: auto;
            position: absolute;
            top: 0; left: 0; bottom: 0; right: 0;
       }

云服務器 GPU云服務器 js繼承的幾種方式服務器請求的幾種方式 java創建對象的幾種方式實現垂直居中

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

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

面試常見問題——垂直居中的幾種方法

摘要：前幾天面試，被問到兩次，沒答好，找到這篇文章收藏學習一下，來自這里做手機的頁面，經常會遇到需要垂直居中的情況，這里把常用的垂直居中的幾種方法整理下。（前幾天面試，被問到兩次，沒答好，找到這篇文章收藏學習一下，來自這里）做手機的頁面，經常會遇到需要垂直居中的情況，這里把常用的垂直居中的幾種方法整理下。結構我是垂直居中元素方法1：dispaly:table-cel...

Prasanta 2019-08-28 18:05 評論0 收藏0
基本方法筆記 - 收藏集 - 掘金

摘要：探討判斷橫豎屏的最佳實現前端掘金在移動端，判斷橫豎屏的場景并不少見，比如根據橫豎屏以不同的樣式來適配，抑或是提醒用戶切換為豎屏以保持良好的用戶體驗。探討判斷橫豎屏的最佳實現 - 前端 - 掘金在移動端，判斷橫豎屏的場景并不少見，比如根據橫豎屏以不同的樣式來適配，抑或是提醒用戶切換為豎屏以保持良好的用戶體驗。判斷橫豎屏的實現方法多種多樣，本文就此來探討下目前有哪些實現方法以及其中的優...

maochunguang 2019-08-20 17:44 評論0 收藏0
那些年，碰上過的面試題

摘要：元素在跨越特定閾值前為相對定位，之后為固定定位。和簡單介紹和，哪個會觸發哪個觸發順序，哪個能夠避免，哪個時盡量減少而不可能避免，哪些操作會觸發阮一峰動畫動畫與動畫區別性能區別性能優化動畫性能優化動畫介紹后續還會繼續進行面試題的積累記錄一下最近碰上的面試題 js篇介紹一下Array的API/方法，具體到返回值和參數 join / slice / splice / sort / pu...

bitkylin 2019-08-29 16:24 評論0 收藏0
那些年，碰上過的面試題

摘要：元素在跨越特定閾值前為相對定位，之后為固定定位。和簡單介紹和，哪個會觸發哪個觸發順序，哪個能夠避免，哪個時盡量減少而不可能避免，哪些操作會觸發阮一峰動畫動畫與動畫區別性能區別性能優化動畫性能優化動畫介紹后續還會繼續進行面試題的積累記錄一下最近碰上的面試題 js篇介紹一下Array的API/方法，具體到返回值和參數 join / slice / splice / sort / pu...

nicercode 2019-08-26 12:12 評論0 收藏0
使一個div垂直+水平居中的幾種方法

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

joyqi 2019-08-29 11:04 評論0 收藏0