前端經典面試題 --- div不設高度完全居中

keelii 發布于2019-08-30 11:18 / 3451人閱讀

摘要：要求下垂直居中內文字垂直居中寬度和高度均為寬度的一半分析居中不難，考慮或者配合屬性實現關鍵點在于高度等于一半，由于沒有高度，設置得到的結果是的高度為即使通過對進行絕對定位的手段使得高度為，高度設置也只能是高度的一半，而不是寬度的一半此時要借

要求

body下div垂直居中

div內文字垂直居中

div寬度和高度均為body寬度的一半

分析

div居中不難，考慮margin或者left/top配合translate屬性實現

關鍵點在于div高度等于body一半，由于body沒有高度，設置div height： 50%；得到的結果是div的高度為0

即使通過對body進行絕對定位的手段使得body高度為100vh，div高度設置50%也只能是body高度的一半，而不是寬度的一半

此時要借助于padding，因為padding設置百分比時，參考便是父容器的寬度

代碼

效果

GPU云服務器云服務器 html完全居中 div的高度面試題棧面試題

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

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

前端面試題2（CSS）

摘要：在元素之后添加內容控制表單控件的禁用狀態。生成相對定位的元素，相對于其正常位置進行定位。由于浮動框不在文檔的普通流中，所以文檔的普通流的塊框表現得就像浮動框不存在一樣。前端面試之CSS display: none; 與 visibility: hidden; 的區別聯系：它們都能讓元素不可見區別： display:none;會讓元素完全從渲染樹中消失，渲染的時候不占據任...

MangoGoing 2019-08-29 15:30 評論0 收藏0
前端面試題2（CSS）

摘要：在元素之后添加內容控制表單控件的禁用狀態。生成相對定位的元素，相對于其正常位置進行定位。由于浮動框不在文檔的普通流中，所以文檔的普通流的塊框表現得就像浮動框不存在一樣。前端面試之CSS display: none; 與 visibility: hidden; 的區別聯系：它們都能讓元素不可見區別： display:none;會讓元素完全從渲染樹中消失，渲染的時候不占據任...

Rocture 2019-08-02 10:31 評論0 收藏0
前端面試題2（CSS）

摘要：在元素之后添加內容控制表單控件的禁用狀態。生成相對定位的元素，相對于其正常位置進行定位。由于浮動框不在文檔的普通流中，所以文檔的普通流的塊框表現得就像浮動框不存在一樣。前端面試之CSS display: none; 與 visibility: hidden; 的區別聯系：它們都能讓元素不可見區別： display:none;會讓元素完全從渲染樹中消失，渲染的時候不占據任...

zorro 2019-08-22 17:30 評論0 收藏0
#yyds干貨盤點# 前端基礎知識面試集錦2

摘要：此元素不會被顯示。生成相對定位的元素，相對于其正常位置進行定位。標簽寫在后與前有什么區別什么是預處理器后處理器預處理器例如，用來預編譯或，增強了代碼的復用性，還有層級變量循環函數等，具有很方便的組件模塊化開發能力，極大的提高工作效率。 CSS介紹一下標準的CSS的盒子模型？低版本IE的盒子模型有什么不同的？（1...

edagarli 2021-11-22 15:29 評論0 收藏0