css未知寬高的盒子div居中的多種方法
原文連結:http://www.cnblogs.com/daysme/p/6366089.html
不知道盒子大小、寬高時,如何讓盒子上下左右居中?
應用場景:比如上傳圖片時,並不知道圖片的大小,但要求圖片顯示在某盒子的正中央。
方法1:讓4周的拉力均勻-常用
<!-- Author: XiaoWen Create a file: 2017-01-13 13:46:47 Last modified: 2017-01-13 14:05:04 Start to work: Finish the work: Other information: --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin:0; padding:0; } #box1{ width: 100px; height: 100px; background: #ccc; position:relative; } #box2{ width: 20px; height: 20px; background: #f00; position:absolute; top:0; /* 四周拉力相同 */ right:0; /* 四周拉力相同 */ bottom:0; /* 四周拉力相同 */ left:0; /* 四周拉力相同 */ margin:auto; /* 再設定 marign 自動 */ } </style> </head> <body> <div id="box1"> <div id="box2"></div> </div> </body> </html>
方法2:c3的屬性,移動自己大小的一半
<!-- Author: XiaoWen Create a file: 2017-01-13 13:46:47 Last modified: 2017-01-13 14:07:09 Start to work: Finish the work: Other information: --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin:0; padding:0; } #box1{ width: 100px; height: 100px; background: #ccc; position:relative; } #box2{ width: 20px; height: 20px; background: #f00; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); } </style> </head> <body> <div id="box1"> <div id="box2"></div> </div> </body> </html>
知道自身高度的情況下,使用負邊距,-margin自身高度的一半
<!-- Author: XiaoWen Create a file: 2017-01-13 13:46:47 Last modified: 2017-01-13 14:02:45 Start to work: Finish the work: Other information: --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin:0; padding:0; } #box1{ width: 100px; height: 100px; background: #ccc; position:relative; } #box2{ width: 20px; height: 20px; background: #f00; position:absolute; left:50%; top:50%; margin-left:-10px; /* 知道自己大小的情況,自身高度的一半 */ margin-top:-10px; /* 知道自己大小的情況,自身高度的一半 */ } </style> </head> <body> <div id="box1"> <div id="box2"></div> </div> </body> </html>
2017-03-18
看到這篇文章有這麼多方法,儲存一下。
原:http://www.cnblogs.com/hutuzhu/p/4450850.html
垂直居中是佈局中十分常見的效果之一,為實現良好的相容性,PC端實現垂直居中的方法一般是通過絕對定位,table-cell,負邊距等方法。有了css3,針對移動端的垂直居中就更加多樣化。
方法1:table-cell
html結構:
1 2 3 |
|
css:
1 2 3 4 5 |
|
方法2:display:flex
1 2 3 4 5 |
|
方法3:絕對定位和負邊距
.box3{position:relative;} .box3 span{ position: absolute; width:100px; height: 50px; top:50%; left:50%; margin-left:-50px; margin-top:-25px; text-align: center; }
方法4:絕對定位和0
1 2 3 4 5 6 7 8 9 |
|
這種方法跟上面的有些類似,但是這裡是通過margin:auto和top,left,right,bottom都設定為0實現居中,很神奇吧。不過這裡得確定內部元素的高度,可以用百分比,比較適合移動端。
方法5:translate
1 2 3 4 5 6 7 8 |
|
這實際上是方法3的變形,移位是通過translate來實現的。
方法6:display:inline-block
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
|
這種方法確實巧妙...通過:after來佔位。
方法7:display:flex和margin:auto
1 2 3 4 5 |
|
方法8:display:-webkit-box
.box9{ display: -webkit-box; -webkit-box-pack:center; -webkit-box-align:center; -webkit-box-orient: vertical; text-align: center }
css3博大精深,可以實現很多創造性的效果,需要好好研究下。
今天又發現一種方法,現在補上:
方法9:display:-webkit-box
這種方法,在 content 元素外插入一個 div。設定此 div height:50%; margin-bottom:-contentheight;
。
content 清除浮動,並顯示在中間。
<div class="floater"></div> <div class="content"> Content here </div>
.floater { float:left; height:50%; margin-bottom:-120px; } .content { clear:both; height:240px; position:relative; }