在日常開發中，經常會遇到要求水平垂直居中效果
實現水平垂直居中也是面試高頻考點
水平垂直居中又分兩種情況
1.內容定寬高
2.內容不定寬高
<
!doctype html>
"en"
>
"utf-8"
>
水平垂直居中效果<
/title>
.box
.content
<
/style>
<
/head>
="box"
>
="content"
>
<
/div>
<
/div>
<
/body>
<
/html>效果
2.絕對定位+left/right/top/bottom + margin
方法簡單好記
="box"
>
="content"
>
<
/div>
<
/div>
.box
.content
<
/style>內容不定寬高
不定寬高的方法也可以用於定寬高的情況
="box"
>
="content"
>我是中間內容<
/span>
<
/div>
.box
.content
<
/style>效果：
2.flex布局
="box"
>
="content"
>我是中間內容<
/span>
<
/div>
.box
.content
<
/style>3.grid布局
="box"
>
="content"
>我是中間內容<
/span>
<
/div>
.box
.content
<
/style>4.display:table-cell
類似將容器變成**中的單元格
="box"
>
="content"
>我是中間內容<
/span>
<
/div>
.box
.content
<
/style>
另外文字垂直居中用text-align：center 和 line-height 值為容器高度
.box:after
img
CSS布局 水平垂直居中
題外話 這是乙個讓人抓狂的問題。html文件結構如下 實現效果 1.子元素已知寬高 給父容器設定相對定位 relative 子元素設定為絕對定位 absolute top left設定為50 margin top margin left分別設定為高寬的一半的負數。outer inner 2.子元素未...
CSS 布局 水平垂直居中
原理 首先利用 absolute 定位把容器塊左頂角對準瀏覽器中心，然後再使用 負 margin 把容器塊向左移動自身寬度的一半，向上移動自身高度的一半，即可以把容器塊的中心移到瀏覽器中心。優點 相容性好 缺點 需要知道寬高，不夠靈活 container原理 首先利用 absolute 定位把容器塊...
CSS居中布局（水平居中和垂直居中）
一 水平居中的四種方法 父容器和子容器寬度均不固定 1 inline block text align 子容器 父容器 缺點 不相容ie6 7，子容器內部的內容也會居中 相容辦法 子容器 模擬inline block 2 table margin 子容器 display table使子容器寬度隨著內...