前端面試中遇到的垂直居中問題

2021-10-24 15:40:28 字數 1041 閱讀 9592

1、flex布局方法：當前div的父級新增flex css樣式

display


: flex;


-webkit-align-items


: center;


align-items


: center;


-webkit-justify-content


: center;


justify-content


: center;
2、絕對定位方法：不確定當前div的寬度和高度，採用 transform: translate(-50%,-50%); 當前div的父級新增相對定位（position: relative;）

background: green;       


position: absolute;      


left: 50%;          


top: 50%;        


transform: translate(-50%,-50%);
3、絕對定位方法：確定了當前div的寬度，margin值為當前div寬度一半的負值

.father 


.son
4、絕對定位方法：絕對定位下top left right bottom 都設定0 ，margin設定為auto

.father 


.son
5、table-cell實現水平垂直居中: table-cell middle center組合使用（子元素不能是塊級元素） 子div只能不能是塊狀元素，否則只能垂直居中，無法水平居中

/*table-cell、vertical-align、text-align組合使用*/


.father 


.son {


width: 200px;


height: 200px;


background-color: green;


display: inline-block;

div水平垂直居中方法（前端面試必備）

方法1.這也是絕大多數使用的方法 樣式 fa.left1 這種方法能夠實現水平垂直居中，但樣式 太多了 方法1的公升級寫法，使用calc 個人比較推薦的寫法！left1 注意 1.calc 的表示式中運算子兩邊必須要有空格。說明 left calc 50 0.75rem 中的0.75rem是指需要水...

遇到過的前端面試

1.settimeout與setinterval的區別 setinterval 方法可按照指定的週期 以毫秒計 來呼叫函式或計算表示式。setinterval 方法會不停地呼叫函式，直到 clearinterval 被呼叫或視窗被關閉。由 setinterval 返回的 id 值可用作 cleari...

前端面試之父子div居中

html中布局 father son div div 使用彈性布局 方法一 彈性布局 father son 使用子絕父相 1 方法二 定位方法1 father son 使用子絕父相 2 小演算法 方法三 定位方法2 演算法 father son margin負值的使用方式見我另一篇blog 未寫 使...