css實現居中

2021-09-21 06:52:18 字數 1272 閱讀 7302

要考慮布局場景，有些並不適合複雜布局，主要實現垂直居中，水平居中會帶一下

1、height配合line-height

/*父標籤*/


.parent
2、vertical-align:middle

/*父標籤*/


.parent


/*子標籤*/


.child
3、display:table-cell

/*父標籤*/


.parent
4、display:table（不可以和float:left配合使用）

/*父標籤*/


.parent


/*子標籤*/


.child
應用場景：子標籤元素不定，內容高度不定。

5、position定位

公共樣式

/*父標籤*/


.parent
a、簡單常用處理方法

/*子標籤*/


.child
b、配合負邊距

.child
c、配合transform

.child
後兩個稍微複雜一點，但功能也是強大的，比較適合內容為多行、寬高不定、文字居左、整體水平垂直居中，用left:0,right:0,或者top:0,bottom:0配合margin:auto不能完美解決，實現不出效果或者高度100%啦，使用fix-content可以解決，但存在相容性
6、flex布局

/*父標籤*/


.parent
7、display:inline-block和vertical-align:middle配合

/*結構*/


將ip符號、ip內容、ip情感和價值觀視覺化，過目不忘，直指人心。


/*sass*/


.parent1


}.parent2

CSS實現居中的方式

class out class in div div 通過margin 0 auto 實現水平居中 out in通過position absolute margin left 實現水平居中 out in通過text align center 實現水平居中 out in通過隱藏節點 float的方法實...

利用CSS實現居中對齊

1.文字居中 首先編寫乙個簡單的html 設定乙個類名為parentdiv的div物件。html 如下 1 div class parentdiv 2這裡隨意填寫 3div 1.1 實現文字水平居中 使用text align 對div.parentdiv設定text align center 來實現...

TM 利用CSS實現居中對齊

利用css實現居中對齊 1.文字居中 首先編寫乙個簡單的html 設定乙個類名為parentdiv的div物件。html 如下 div class parentdiv 這裡隨意填寫 div 1.1 實現文字水平居中 使用text align 對div.parentdiv設定text align ce...