在寫web前端的時候,水平居中一般沒有任何爭議。有爭議的主要在垂直居中的處理上面。
一般來說垂直居中有這樣的幾種辦法。
>
body
.header
.companynamea
style
>
class
="header"
>
class
="companynamea"
href
="/"
>
公司名稱a
>
div>
>
body
.header
.layoutdiv
.companynamea
.otherdiv
.othercontenttest
style
>
class
="header"
>
class
="layoutdiv"
>
div>
class
="companynamea"
href
="/"
>
公司名稱a
>
class
="otherdiv"
>
div>
class
="othercontenttest"
>
testh1
>
div>
【已處理子元素間空隙示例】：
>
body
.header
.layoutdiv
.companynamea
.otherdiv
.othercontenttest
style
>
class
="header"
>
class
="layoutdiv"
>
div>
class
="companynamea"
href
="/"
>
公司名稱a
>
class
="otherdiv"
>
div>
class
="othercontenttest"
>
testh1
>
div>
div盒子水平垂直居中的方法推薦
父盒子是position relative 方法一 寬高確定 div絕對定位水平垂直居中 margin 負間距 方法二 寬高確定 div絕對定位水平垂直居中 margin auto實現絕對定位元素的居中 相容性 ie7及之前版本不支援 方法三 寬高不定 div絕對定位水平垂直居中 transform...
前端水平居中以及垂直居中方法積累
1.1已知寬度塊元素寬度 child1.2文字內容居中 parent1.3通過 child1.4已知寬度,通過設定position absolute,margin left為寬度的負一半.parent child1.5未知寬度,通過設定position absolute.parent child1....
前端元素垂直水平居中的多個方法
建立乙個bfc，高度坍塌 居中 margin重合問題均可解決 1 浮動元素float不為none 2 絕對定位或固定定位 position absolute fixed 3 行內元素 display inline block 4 overflow不為visible的塊級元素 5 display值為f...