編碼規(guī)范
-
參考網(wǎng)址
- 縮進與空格
- 選擇器的書寫
- ……
垂直居中的實現(xiàn)方法
-
文字上下padding相同時呜象，則文字垂直居中
和line-Height使用更佳p { text-align: center; padding: 30px 0px; } -
絕對居中:利用position:absolute
.parent { height :500px; background-color: rgb(223,225,180); position: relative; }-
有固定高度時姿搜，利用margin來進偏移
.child { border:1px solid red; width:200px; height:100px;/*必須定高度*/ position: absolute; margin-top:-50px;/*寬度的一半*/ margin-left:-100px;/*高度的一半*/ left: 50%; top: 50%; }
-
沒有固定寬高侣肄，利用transform：translate(-50%,-50%)進行偏移鹿响，ps：要注意它的兼容性
.child { border:1px solid red; position: absolute; left: 50%; top: 50%; transform:translate(-50%,-50%); }
-
-
vertical-align:middle實現(xiàn)居中
作用在行列元素和表格上
原理：利用行列元素的對齊方式幼衰，而其中最高部分剛好等于邊框高度，以此實現(xiàn)垂直居中-
html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JS Bin</title> </head> <body> <div class="parent"> <span class="befor"></span><div class="child"> 饑人谷饑人谷 饑人谷 饑人谷 饑人谷 饑人谷 饑人谷 饑人谷 饑人谷 饑人谷 饑人谷 饑人谷 饑人谷 饑人谷 饑人谷 饑人谷 饑人谷 饑人谷 饑人谷 饑人谷 饑人谷 饑人谷 饑人谷 饑人谷 饑人谷 饑人谷 饑人谷 饑人谷 饑人谷 饑人谷 饑人谷 饑人谷 饑人谷 饑人谷 饑人谷 饑人谷 饑人谷 饑人谷 </div><span class="after"></span> </div> </body> </html>
可以把span.befor,child,span.after這三部分看作是三個文字
-
css
.parent { border: 2px solid red; height:600px; text-align:center; } .child { border: 1px solid #000; width:300px; display: inline-block; vertical-align:middle; } span.befor { / *outline: 2px solid yellow;*/ height:100%; display:inline-block; vertical-align:middle; } span.after{ /*outline: 2px solid yellow;*/ height:100%; display:inline-block; vertical-align:middle; }
-
（1）再沒有加vertical-align：middle時谦絮，是以底部為基準對齊了
（2）在所有子元素中加了vertical-align:middle時题诵，以span中線為基準洁仗，對齊了
（3）最后，把span的邊框去掉性锭，就能實現(xiàn)
效果預覽
-
使用table-cell實現(xiàn)居中
效果預覽
實現(xiàn)以下效果
- html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="box">
<div class="tr1"></div>
<div class="con"></div>
</div>
<div class="box">
<div class="tr2"></div>
<div class="con"></div>
</div>
<div class="box">
<div class="tr3"></div>
<div class="con"></div>
</div>
</body>
</html>
- css
.box {
margin-bottom:50px;
position: relative;
margin-top:20px;
}
.con {
width:200px;
height:100px;
border:1px solid #ccc;
margin-top:10px;
}
.tr1 {
position:absolute;
top:-10px;
left:10px;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #ccc;
}
.tr2 {
position: absolute;
top:0px;
left:182px;
border-top: 10px solid red;
border-right: 10px solid red;
border-left: 10px solid transparent;
border-bottom: 10px solid transparent赠潦；
}
.tr3 {
position:absolute;
top:-9px;
left:10px;
border-left:10px solid transparent;
border-right:10px solid transparent;
border-bottom:10px solid #ccc;
}
.tr3:after {
content:'';
position:absolute;
top:1px;
left:-10px;
border-left:10px solid transparent;
border-right:10px solid transparent;
border-bottom:10px solid #fff;
}