CSS居中的N種方法，用哪個隨你挑

2021-10-03 03:32:57 字數 952 閱讀 3310

只要是頁面布局，就會涉及到子元素在父元素內水平垂直居中，以下總結了css居中的n種方法，總有一種適合你

1.1、使用margin屬性

.parent 


.child
1.2、使用padding屬性
.parent 


.child
1.3、利用元素型別轉換（2種）
/* vertical-align+text-align */


.parent 


.child 


/* vertical-align+text-align  + span參照物 */


/* 這裡的參照物是和child同為子元素，這方法不用給父元素加行高，網頁中經常有緊跟文字並同時垂直居中的情況，這個方法很好用 */


.parent 


.child 


span
1.4、利用定位position（3種）
.parent 


/* 第一種 */


.child 


/* 第二種 */


.child 


/* 第三種 */


.child
2.1、利用定位+transform:translate
.parent 


.child
2.2、彈性盒（2種）
/* 第一種 */


.parent 


.child 


/* 第二種 */


.parent
2.3、grid布局
.parent 


.child
2.4、**布局（不推薦使用）
.parent 


.child
以上就是css居中的一些常用方法，其中flex和grid布局都有相容問題，table布局更要謹慎使用。

CSS實現水平垂直居中的N種方法

劃重點，這是一道面試必考題，很多面試官都喜歡問這個問題。要實現上圖的效果看似很簡單，實則暗藏玄機，本文總結了一下css實現水平垂直居中的方式大概有下面這些 僅居中元素定寬高適用 居中元素不定寬高 為了實現上面的效果先來做些準備工作，假設html 如下，總共兩個元素，父元素和子元素 123123 wp...

CSS教程 div垂直居中的N種方法

在說到這個問題的時候，也許有人會問css中不是有vertical align屬性來設定垂直居中的嗎？即使是某些瀏覽器不支援我只需做少許的css hack技術就可以啊！所以在這裡我還要囉嗦兩句，css中的確是有vertical align屬性，但是它只對 x html元素中擁有valign特性的元素才...

用css實現垂直水平居中的幾種方法

1.用inline block和vertical align來實現居中 這種方法適合於未知寬度高度的情況下。lang en charset utf 8 titletitle container container before center div style head id container i...