CSS之元素居中
阿新 • • 發佈：2018-12-31
一、水平居中
水平居中分為了行級元素、塊級元素（定寬塊級元素、不定寬塊級元素）。
（1）行級元素
行級元素居中只需在父元素中新增text-align:center屬性即可。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #container{ width:500px; height:300px; border:2px solid #00FFFF; text-align: center; } #img{ height:200px; width:300px; } </style> <body> <div id="container"> <img id="img" src="img/1.jpg"> </div> </body> </html>
（2）定寬塊級元素
定寬塊級元素使用margin：0 auto;進行居中。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #container{ width:500px; height:300px; border:2px solid #00FFFF; } #img{ display: block; height:200px; margin: 0 auto; } </style> <body> <div id="container"> <img id="img" src="img/1.jpg"> </div> </body> </html>
（3）不定寬塊級元素
不定寬元素使用display:inline;text-align:center。
二、垂直居中
（1）父元素高度確定的單行文字
設定height與line-height高度一致。
（2）塊級元素垂直居中
1.已知子元素高度和父元素高度，直接使用margin-top屬性，其值為父元素高度的一半減去子元素高度的一半；或者使用position子元素對於父元素絕對定位，top:50%,margin-top減去自身高度一半。
2.子元素相對父元素絕對定位，設定top、right、bottom、left四個方向均為0，並使用margin：auto進行垂直水平居中。
3.父元素中使用display:table-cell,vertical-align:middle實現對子元素的垂直居中。
4.使用transform進行垂直居中（存在相容性問題）：子元素對於父元素進行絕對定位，top、left設定為50%，使用transform:translate(-50%,-50%),使用這種方式無需知道子元素高度。
5.使用flex實現
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#container{
width:500px;
height:300px;
border:2px solid #00FFFF;
display: flex;
justify-content: center;
align-items: center;
}
#img{
height:200px;
width:300px;
}
</style>
<body>
<div id="container">
<img id="img" src="img/1.jpg">
</div>
</body>
</html>