CSS主流布局 垂直居中布局

是使得父級元素容器中的子元素保持垂直居中布局的方式

-table-cell+vertical-align屬性配合使用

-absolute+transform屬性配合使用

html

<

!--父級元素--
>
="parent"
>
<
!-- 子級元素--
vertical-align屬性用於使文字垂直對齊的方式，常見的屬性值有top,middle,bottomdisplay屬性的table屬性值相當與元素的布局，table-cell相當於元素的布局。
瀏覽器的相容性好，因為屬性都相容老版本的瀏覽器。
vertical-align與text-align屬性一樣都具有繼承性，在父級元素中新增文字也會顯示出垂直居中的效果。
html
<

!--父級元素--
>
="parent"
>
<
!-- 子級元素--
>
文字布局
="child"
>
<
/div>
<
/div>css**不變。
!--父級元素--
>
="parent"
>
<
!-- 子級元素--
>
="child"
>
<
/div>
<
/div>css
.parent
.child 
如果子級元素開啟定位父級元素沒有開啟定位，子級元素相對於頁面進行定位；

如果子級元素開啟定位，父級元素也開啟定位，子級元素相對於父級元素進行定位。
transform:translatey(-100px),子級元素向上平移-100px，一般使用-50%更好
父級元素是否脫離文件流，都不會影響子級元素垂直居中的效果
transform是css3中的屬性因此對瀏覽器的相容性支援並不友好。
 
CSS布局 水平垂直居中
題外話 這是乙個讓人抓狂的問題。html文件結構如下 實現效果 1.子元素已知寬高 給父容器設定相對定位 relative 子元素設定為絕對定位 absolute top left設定為50 margin top margin left分別設定為高寬的一半的負數。outer inner 2.子元素未...
CSS 布局 水平垂直居中
原理 首先利用 absolute 定位把容器塊左頂角對準瀏覽器中心，然後再使用 負 margin 把容器塊向左移動自身寬度的一半，向上移動自身高度的一半，即可以把容器塊的中心移到瀏覽器中心。優點 相容性好 缺點 需要知道寬高，不夠靈活 container原理 首先利用 absolute 定位把容器塊...
CSS水平垂直居中布局
在日常開發中，經常會遇到要求水平垂直居中效果 實現水平垂直居中也是面試高頻考點 水平垂直居中又分兩種情況 1.內容定寬高 2.內容不定寬高 內容定寬高1.絕對定位和負margin值 doctype html en utf 8 水平垂直居中效果 title box content style head...