(面試題)垂直居中的幾種實(shí)現(xiàn)方式

cheukyin 發(fā)布于2019-08-30 11:18 / 1837人閱讀

摘要：尤其是在實(shí)際頁面中，有很多特殊的場(chǎng)景，導(dǎo)致水平居中實(shí)現(xiàn)起來比較麻煩。這篇文章旨在紀(jì)錄一些我知道的居中方式。以一道經(jīng)典面試題為例一個(gè)的在一個(gè)水平垂直居中，用實(shí)現(xiàn)。首先定義元素層和垂直居中無關(guān)的樣式直接定義在里。

相比較水平居中，垂直居中比較復(fù)雜點(diǎn)。尤其是在實(shí)際頁面中，有很多特殊的場(chǎng)景，導(dǎo)致水平居中實(shí)現(xiàn)起來比較麻煩。這篇文章旨在紀(jì)錄一些我知道的居中方式。以一道經(jīng)典面試題為例：一個(gè)200*200的div在一個(gè)div水平垂直居中，用css實(shí)現(xiàn)。

首先定義元素

1.百分比的方式

缺點(diǎn)：必須知道居中元素的實(shí)際大小。根據(jù)實(shí)際大小用margin進(jìn)行調(diào)整，因?yàn)閠op，left是以元素的上邊框進(jìn)行計(jì)算的。

2.百分比結(jié)合transform

優(yōu)點(diǎn)：利用transform改良上面那種必須知道元素大小的限制。

3.flex布局

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

4.flex布局結(jié)合margin

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

5.絕對(duì)定位和0

    .margin{
            position: relative;
        }

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

云服務(wù)器 GPU云服務(wù)器 js繼承的幾種方式服務(wù)器請(qǐng)求的幾種方式 java創(chuàng)建對(duì)象的幾種方式實(shí)現(xiàn)垂直居中

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/114912.html

相關(guān)文章

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

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

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

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

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

摘要：元素在跨越特定閾值前為相對(duì)定位，之后為固定定位。和簡(jiǎn)單介紹和，哪個(gè)會(huì)觸發(fā)哪個(gè)觸發(fā)順序，哪個(gè)能夠避免，哪個(gè)時(shí)盡量減少而不可能避免，哪些操作會(huì)觸發(fā)阮一峰動(dòng)畫動(dòng)畫與動(dòng)畫區(qū)別性能區(qū)別性能優(yōu)化動(dòng)畫性能優(yōu)化動(dòng)畫介紹后續(xù)還會(huì)繼續(xù)進(jìn)行面試題的積累記錄一下最近碰上的面試題 js篇介紹一下Array的API/方法，具體到返回值和參數(shù) join / slice / splice / sort / pu...

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

摘要：元素在跨越特定閾值前為相對(duì)定位，之后為固定定位。和簡(jiǎn)單介紹和，哪個(gè)會(huì)觸發(fā)哪個(gè)觸發(fā)順序，哪個(gè)能夠避免，哪個(gè)時(shí)盡量減少而不可能避免，哪些操作會(huì)觸發(fā)阮一峰動(dòng)畫動(dòng)畫與動(dòng)畫區(qū)別性能區(qū)別性能優(yōu)化動(dòng)畫性能優(yōu)化動(dòng)畫介紹后續(xù)還會(huì)繼續(xù)進(jìn)行面試題的積累記錄一下最近碰上的面試題 js篇介紹一下Array的API/方法，具體到返回值和參數(shù) join / slice / splice / sort / pu...

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

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

joyqi 2019-08-29 11:04 評(píng)論0 收藏0