CSS垂直居中布局問題

最近總被這玩意坑，面試官也老愛問，「還有別的方式嗎」.......

1、使用絕對定位

元素在過度受限情況下，將margin設定為auto，瀏覽器會重算margin的值，過度受限指的是同時設定top/bottom與height或者left/right與width

有點需要注意的是，設定子元素的寬度高度。

123

css：

1

<
style 
type
="text/css"
>
2.absolute_center
15style
>

使用lineheight實現簡單的垂直居中

1

<
div 
class
="single_line"
>
2文字文字文字文字文字文字文字texttexttexttexttexttext
3div
>

1

<
style 
type
="text/css"
>
2.single_line
9style
>

flex在移動端的布局中非常常見，但是對低版本的瀏覽器有相容性問題。

父容器container需要設定height高度

1

<
div 
class
="container"
>
2<
div 
class
="center"
>
3center 
4div
>
5div
>

1

.container
8.center

父容器需要設定height

1

<
div 
class
="container"
>
2<
div 
class
= "center"
>center
div>
3div
>

1

<
style 
type
="text/css"
>
2.container
7.center
17style
>

父容器需要設定height、width的值

1

<
div 
class
="container"
>
2<
span 
class
="center"
>center
span
>
3div
>

1

<
style 
type
="text/css"
>
2.container
1011
.center
14style
>

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...