【CSS三種居中方案全解】CSS水平垂直居中常用方法集結
目錄
前言
CSS水平垂直居中
參考資料
系列文章
一、前言
難得搜尋整理一番 CSS 垂直居中,水平居中,水平垂直居中的近乎所有的方案。既能回顧知識查漏補缺,又能提升知識增長見識。CSS 本身就沒有道理,以下內容全是個人蒐集整理,參考資料放在最後。居中的方案只是為了實現居中,不代表每個方案都是最好的解決辦法,因為有些方案還是很離譜的,一般用不上。希望能幫助到你們。
話不多 BB,直接上才藝(程式碼演示)
tips:內容挺多的,順著標題找吧
二、CSS 水平垂直居中
1、父元素display:table-cell;vertical-align:center
。裡面的子元素就會實現水平垂直居中,不需要知道子元素的寬高
/* HTML */
<div class='father'>
<div class='son'></div>
</div>
<style>
.father {
display: table-cell;
vertical-align: middle;
text-align: center;
width: 300px;
height: 300px;
border: 3px solid red;
}
.son {
width: 100px;
height: 100px;
background-color: aqua;
display: inline-block;
}
</style>
- 效果展示
2、absolute+margin:auto
。定位為 absolute 的元素水平垂直居中,不需要知道該元素的寬高
<!-- HTMl -->
<div class="father">
<div class="son"></div>
</div>
<style>
.father {
position: relative;
width: 300px;
height: 300px;
border: 3px solid red;
}
.son {
position: absolute;
background-color: aqua;
width: 50px;
height: 50px;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
</style>
- 效果展示
3、absolute+負margin
。定位為 absolute 的元素水平垂直居中,需要知道該元素的寬高
<!-- HTMl -->
<div class="father">
<div class="son"></div>
</div>
<style>
.father {
position: relative;
width: 300px;
height: 300px;
border: 3px solid red;
}
.son {
position: absolute;
width: 100px;
height: 100px;
background-color: aqua;
top: 50%;
left: 50%;
/* 負margin須是高度或寬度的一半 */
margin-top: -50px;
margin-left: -50px;
}
</style>
效果展示
4、absolute+calc(css3計算屬性)
。定位為 absolute 的元素水平垂直居中,需要知道該元素的寬高
<!-- HTMl -->
<div class="father">
<div class="son"></div>
</div>
<style>
.father {
position: relative;
width: 300px;
height: 300px;
border: 3px solid red;
}
.son {
position: absolute;
width: 100px;
height: 100px;
background-color: aqua;
/* 注意"-"兩邊要隔開 減去的須是高度或寬度的一半*/
top: calc(50% - 50px);
left: calc(50% - 50px)
}
</style>
效果展示
5、absolute+transform
。定位為 absolute 的元素垂直居中,不需要知道元素的寬高
<!-- HTMl -->
<div class="father">
<div class="son"></div>
</div>
<style>
.father {
position: relative;
width: 300px;
height: 300px;
border: 3px solid red;
}
.son {
position: absolute;
width: 100px;
height: 100px;
background-color: aqua;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
</style>
效果展示
6、line-height
。父元素:line-height=height,text-align:center。子元素:display:inline-block,vertical-align: middle。子元素水平垂直居中,不需要知道子元素的寬高
<!-- HTMl -->
<div class="father">
<div class="son"></div>
</div>
<style>
.father {
width: 300px;
height: 300px;
border: 3px solid red;
line-height: 300px;
text-align: center;
}
.son {
background-color: aqua;
width: 100px;
height: 100px;
display: inline-block;
vertical-align: middle;
}
</style>
效果展示
7、flex
。目前主流的佈局方案,父元素為 flex 容器且新增 align-items: center,justify-content: center,控制子元素的佈局。不需要知道子元素的寬高
<!-- HTMl -->
<div class="father">
<div class="son"></div>
</div>
<style>
.father {
width: 300px;
height: 300px;
border: 3px solid red;
display: flex;
align-items: center;
}
.son {
background-color: aqua;
width: 100px;
height: 100px;
}
</style>
效果展示
8、grid
,目前最強大的佈局方案,使用還尚未流行。父元素為 grid,子元素新增 align-self: center,justify-self: center。不需要知道子元素的寬高
<!-- HTMl -->
<div class="father">
<div class="son"></div>
</div>
<style>
.father {
width: 300px;
height: 300px;
border: 3px solid red;
display: grid;
}
.son {
background-color: aqua;
width: 100px;
height: 100px;
align-self: center;
}
</style>
效果展示
9、writing-mode
,這是搜尋整理而來,參考資料見最後。子元素和孫子元素盒子 display: inline-block。孫子元素垂直居中,不需要知道該盒子的寬高
<!-- HTML -->
<div class="grandfather">
<div class="father">
<div class="son"></div>
</div>
</div>
<style>
.grandfather {
width: 300px;
height: 300px;
border: 3px solid red;
writing-mode: vertical-lr;
text-align: center;
}
.father {
writing-mode: horizontal-tb;
display: inline-block;
width: 100%;
}
.son {
background-color: aqua;
width: 100px;
height: 100px;
display: inline-block;
}
</style>
效果展示
三、參考資料
相關文章
- CSS水平垂直居中解決方案CSS
- CSS水平居中和垂直居中的方法CSS
- CSS垂直居中和水平居中CSS
- CSS水平居中和垂直居中CSS
- css水平、垂直居中的方法CSS
- css水平垂直居中CSS
- CSS垂直水平居中CSS
- CSS的垂直居中和水平居中總結CSS
- css實現垂直水平居中的幾種方法CSS
- css div全屏水平垂直居中CSS
- CSS按鈕垂直水平居中CSS
- CSS視窗垂直水平居中CSS
- CSS佈局之水平居中和垂直居中CSS
- css-水平居中、垂直居中(初級篇)CSS
- CSS div水平垂直居中效果詳解CSS
- CSS的7種常用的垂直居中的方法CSS
- div垂直居中-CSS元素垂直居中方法CSS
- css 水平垂直居中實現方式CSS
- CSS垂直水平完全居中手冊CSS
- 16種方法實現水平居中垂直居中
- css實現水平垂直居中的幾種方式CSS
- CSS實現垂直居中的常用方法CSS
- CSS垂直居中方法CSS
- CSS元素(文字、圖片)水平垂直居中方法CSS
- CSS實現水平、垂直居中,N種方法,徹底說透!CSS
- 一起搞懂 CSS 水平居中與垂直居中的16個方法CSS
- CSS 垂直居中CSS
- css讓一個容器水平垂直居中CSS
- css 圖片在div中垂直水平居中CSS
- 三行CSS程式碼實現水平垂直居中CSS
- 淺談居中問題(水平居中、垂直居中、水平垂直居中)
- 元素水平居中,垂直居中方法
- 元素水平垂直居中三種方法實現
- Css實現垂直居中的幾種方法CSS
- CSS 實現垂直居中的 5 種方法CSS
- 盤點8種CSS實現垂直居中水平居中的絕對定位居中技術CSS
- CSS垂直居中精華總結CSS
- 如何實現CSS居中?–CSS居中常用方法CSS