居中
-
水平居中
- 行內(nèi)元素：text-align：center瞬内；
- 塊級(jí)元素：margin： 0 auto；
-
垂直居中
- 在一個(gè)高度不固定的元素內(nèi)限书，高度是由內(nèi)容撐開的元素內(nèi) 使用上下padding 相同可以實(shí)現(xiàn)
- 絕對(duì)定位加 -margin 或 transform（translate）來實(shí)現(xiàn)居中:
- 對(duì)于固定寬高的元素虫蝶，如果想要使它垂直居中，對(duì)其進(jìn)行
position：absolute倦西；然后進(jìn)行margin-left:-width的一半 ; margin-right:-height的一半這樣寫是因?yàn)槎ㄎ粫r(shí)以左上角為標(biāo)準(zhǔn)
- 對(duì)于固定寬高的元素虫蝶，如果想要使它垂直居中，對(duì)其進(jìn)行
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
html,body {
height:100%;
}
.box {
width:400px;
height:300px;
background-color:#eee;
text-align:center;
/* 以上實(shí)現(xiàn)水平居中 */
position:absolute;
top:50%;
left:50%;
margin-top:-150px;
margin-left:-200px;
box-shadow: 0px 0px 3px #000;
}
</style>
</head>
<body>
<div class="box">
<h3>小標(biāo)題</h3>
<p>這是一個(gè)段落</p>
</div>
</body>
</html>
- 或者使用
transform:translate(-50%,-50%);這種方法不限寬高（需要瀏覽器兼容能真，css3屬性）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
html,body {
height:100%;
}
.box {
background-color:#eee;
text-align:center;
/* 以上實(shí)現(xiàn)水平居中 */
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%); /* 這種方法可以不設(shè)置寬高 */
box-shadow: 0px 0px 3px #000;
}
</style>
</head>
<body>
<div class="box">
<h3>小標(biāo)題</h3>
<p>這是一個(gè)段落</p>
</div>
</body>
</html>
- vertical-align 實(shí)現(xiàn)居中
- 假設(shè)在元素內(nèi)有個(gè)一圖片，圖片需要居中扰柠，水平居中使用text-align粉铐，垂直居中可以使用
vertical-align:middle;實(shí)現(xiàn) - 在父容器上vertical-align:middle; 在圖片上使用vertical-align:middle;然后發(fā)現(xiàn)無效，是因?yàn)閷?duì)齊的元素未撐滿整個(gè)容器卤档，可使用偽元素
box::after {content:''; display: inline-block; height:100%;}即可為元素添加一個(gè)偽元素使其成功實(shí)現(xiàn)對(duì)齊
- 假設(shè)在元素內(nèi)有個(gè)一圖片，圖片需要居中扰柠，水平居中使用text-align粉铐，垂直居中可以使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
.box {
width:300px;
height:200px;
border:1px solid;
text-align:center;
}
.box img {
width:180px;
vertical-align:middle;
}
.box:after {
content:'';
display:inline-block;
height:100%;
vertical-align:middle;
}
</style>
</head>
<body>
<div class="box">
<img src="https://www.baidu.com/img/bd_logo1.png" alt="">
</div>
</body>
</html>
-
table-cell 實(shí)現(xiàn)居中 , 將父元素元素設(shè)置為
display:table-cell;來實(shí)現(xiàn).box { width:300px; height:200px; display:table-cell; vertical-align:middle; text-align:center; }
此時(shí)已經(jīng)不是一個(gè)塊級(jí)元素蝙泼，需要設(shè)置一個(gè)寬高
- flex 實(shí)現(xiàn) ，參見flex簡(jiǎn)析
.box {
width:200px;
height:200px;
display:flex;
align-items:center; /* 垂直居中 */
justify-content:center;/* 水平居中 */
}
