容器垂直居中的六中方法（前端開發基礎一）

2021-07-25 02:22:25 字數 694 閱讀 4068

.div1


.div2
<divclass=


"div1">


<divclass=


"div2">div>


div>
這是容器的基本結構，要達到的效果是使div2在div1中垂直居中。下面一共有六中方法：
法一  已知div1和div2的寬高，通過手動計算，用一下方式：


.div2
法二 外層div設定為相對定位，內層div設定絕對定位，最後得到的效果是margin:0 auto.div1


.div2
法三 設定外層div為display:table-cell,容器div設定為margin：0 auto


.div1


.div2




法四  父級元素設定為相對定位，容器設定為絕對定位，再用transform變換，
這種方式存在瀏覽器相容性的問題（transform相容）


.div1


.div2


				
css中垂直居中方法
水平居中 text align center 塊級元素水平居中 採取絕對定位方式 自適應塊級元素水平居中 借助css3的變形屬性 transfor 來完成 content 行內元素垂直居中 單行文字的垂直居中 1.元素的寬度和行高相等時，文字呈現垂直居中 多行文字的垂直居中 1.不固定高度的垂直居中...

				
前端水平居中以及垂直居中方法積累
1.1已知寬度塊元素寬度 child1.2文字內容居中 parent1.3通過 child1.4已知寬度,通過設定position absolute,margin left為寬度的負一半.parent child1.5未知寬度,通過設定position absolute.parent child1....

				
行內元素的垂直居中方法
方法1 設定塊元素的 height,line height為相同的值 作用於單行文字，使文字垂直居中顯示 實現原理 line height 與 font size 的計算值之差 在 css 中成為 行間距 分為兩半，分別加到乙個文字行內容的頂部和底部。可以包含這些內容的最小框就是行框。實現了單行文字...