當前位置：首頁 > 前端技术 > CSS >内容正文

CSS

CSS未知宽高元素水平垂直居中

發布時間：2023/12/2 CSS 39 豆豆

生活随笔收集整理的這篇文章主要介紹了 CSS未知宽高元素水平垂直居中小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

方法一：table、cell-table

思路：顯示設置父元素為：table，子元素為：cell-table，這樣就可以使用vertical-align: center，實現水平居中
優點：父元素（parent）可以動態的改變高度（table元素的特性）
缺點：IE8以下不支持

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>未知寬高元素水平垂直居中</title> </head> <style>.parent1{display: table;height:300px;width: 300px;background-color: #FD0C70; } .parent1 .child{display: table-cell;vertical-align: middle;text-align: center;color: #fff;font-size: 16px; }</style> <body><div class="parent1"><div class="child">hello world-1</div></div> </body> </html>

方法二：

思路：使用一個空標簽span設置他的vertical-align基準線為中間，并且讓他為inline-block，寬度為0
缺點：多了一個沒用的空標簽，display:inline-blockIE 6 7是不支持的(添加上：_zoom1;*display:inline)。
當然也可以使用偽元素來代替span標簽，不過IE支持也不好，但這是后話了

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>未知寬高元素水平垂直居中</title> </head> <style> .parent2{height:300px;width: 300px;text-align: center;background: #FD0C70; } .parent2 span{display: inline-block;;width: 0;height: 100%;vertical-align: middle;zoom: 1;/*BFC*/*display: inline; } .parent2 .child{display: inline-block;color: #fff;zoom: 1;/*BFC*/*display: inline; }</style> <body><div class="parent1"><div class="child">hello world-1</div></div><div class="parent2"><span></span><div class="child">hello world-2</div></div> </body> </html>

方法三：絕對定位

思路：子元素絕對定位，距離頂部 50%，左邊50%，然后使用css3 transform:translate(-50%; -50%)
優點：高大上，可以在webkit內核的瀏覽器中使用
缺點：不支持IE9以下不支持transform屬性

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>未知寬高元素水平垂直居中</title> </head> <style> .parent3{position: relative;height:300px;width: 300px;background: #FD0C70; } .parent3 .child{position: absolute;top: 50%;left: 50%;color: #fff;transform: translate(-50%, -50%); } </style> <body> <div class="parent3"><div class="child">hello world-3</div></div> </body> </html>

方法四：彈性盒子flex

思路：使用css3 flex布局
優點：簡單快捷
缺點：兼容不好吧，詳情見：http://caniuse.com/#search=flex

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>未知寬高元素水平垂直居中</title> </head> <style> .parent4{display: flex;justify-content: center;align-items: center;width: 300px;height:300px;background: #FD0C70; } .parent4 .child{color:#fff; } </style> <body>div> <div class="parent4"><div class="child">hello world-4</div></div> </body> </html>

更多專業前端知識，請上【猿2048】www.mk2048.com

總結

以上是生活随笔為你收集整理的CSS未知宽高元素水平垂直居中的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：基于面向对象的图片轮播（js原生代码）
下一篇：文字阴影-CSS Text-Shadow