2019-11-02 20:18:35
一丶什麼是垂直居中
指當前標籤在父級容器中垂直方向是居中顯示的
實現垂直居中的幾種方式：
1.table-cell+vertical-align 屬性配合使用
2.absolute+transform 屬性配合使用
3.display+align-items 屬性配個使用
4.position+margin 屬性配合使用
二丶**
1.第一種
效果：
vertical-align:屬性時用來設定文字內容垂直方向的對齊方式
這裡常用屬性值：top 頂部對齊
middle 居中對齊
bottom 底部對齊
這裡為什麼會對div有效果，就完全是因為display屬性的table-cell屬性值，這時父級標籤將會表示成為乙個**的單元格，在table中單元格是可以將內容垂直居中的，因為單元格有兩種對齊方式，一種是水平方向的，一種是垂直方向的。
這種方式的優點與缺點
優點：瀏覽器相容性好，支援老版本的瀏覽器，這兩個屬性在css2中也是支援的而老版本的瀏覽器對css2的支援非常好
缺點：vertical-align屬性具有繼承性，這將會導致父級標籤內的所有文字都是垂直居中的
2.第二種方式
效果：
這裡的定位並沒有多於，這裡是讓子級標籤在父級標籤居中的，父級標籤不開啟定位將會以頁面進行定位，如果開啟了將會以父級標籤進行定位，所以這裡需要開啟父級標籤的定位。
這種方式的優缺點
優點：父級標籤不管是否脫離文件流，不會影響子級標籤垂直居中的效果
缺點：transform屬性是css3中的新屬性，瀏覽器支援不好，在個別老版本的瀏覽器中不適用
3.第三種
效果：
這裡布局使用的flex布局（彈性布局）任何乙個容器都可以指定為flex布局，在flex布局中它的子級標籤都將會成為flex item，這個好像有點老了
4.第四種
效果：
垂直居中不只是只有這幾種方法，還有很多的，這裡不全部寫了
下篇水平垂直居中
預設布局換行 幾種常見的htmlcss布局
ie盒模型和標準盒模型的區別 兩者的區別在於content的不同，ie盒模型的content包括border padding flex 是 flexible box 的縮寫，意為 彈性布局 用來為盒狀模型提供最大的靈活性。對於ie，其瀏覽器的相容性，flex 只支援 ie 10 採用 flex 布局...
css實現垂直居中的幾種常見方法
1.如果是單行文字。子元素是塊級元素，則設定子元素的 line height 等於父元素的高，可使子元素垂直居中與父元素 en 這是一段要垂直水平居中的文字！2 對於已知高度的塊級子元素，子元素採用絕對定位，另一種的絕對定位 子元素不管是塊級，行內。未知高度的子元素，設定子元素 translate ...
大小不固定，多行文字的垂直居
1 垂直居中 父元素高度確定的單行文字 設定父元素的height和line height高度一致注 height是指該元素的高度，line height是指行間距。line height與font size的計算值之差，在css成為行間距，分為兩半，分別加到乙個文字行內容的頂部和底部。弊端 當文字長...