元素水平居中
text-align: center;：設置行內元素、行內塊級元素水平居中
margin: 0 auto;：設置塊級元素水平居中
行高垂直居中法
適用於單行，有父元素有固定高度
line-height: 300px;：設置行內元素和行內塊級元素垂直居中
內、外邊距居中法
適用於父元素有固定高度
方法一：內邊距法（設置給父元素）
- 水平居中：設置左內邊距=（父元素寬度-自元素寬度）/ 2
- 垂直居中：設置上內邊距=（父元素高度-自元素高度）/ 2
方法二：外邊距法（設置給子元素；注意外邊距擊穿）
- 水平居中：設置左外邊距=（父元素寬度-自元素寬度）/ 2
- 垂直居中：設置上外邊距=（父元素高度-自元素高度）/ 2
定位加外邊距居中法
適用於父元素沒有具體尺寸，子元素有具體尺寸
- 父元素設置相對定位：
position:relative; - 子元素設置絕對定位：
position:absolute; top:50%; left:50%;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>標題</title>
<link rel="stylesheet" href="../css/reset.css">
<style type="text/css">
html,body{height: 100%;}
#box{
width: 50%; height: 50%;
margin: 0 auto; background: bisque;
position: relative;
}
.zxw{
background: red;
width: 300px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -150px;
margin-top: -50px;
}
</style>
</head>
<body>
<div id="box">
<div class="zxw"></div>
</div>
</body>
</html>
定位加外邊距自適應居中法
適用於父元素、子元素都沒有具體尺寸
- 父元素設置相對定位：
position:relative; - 子元素設置絕對定位：
position:absolute; top:0; left:0; bottom:0; right:0;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>標題</title>
<link rel="stylesheet" href="../css/reset.css">
<style type="text/css">
html,body{height: 100%;}
#box{
width: 50%; height: 50%;
margin: 0 auto; background: bisque;
position: relative;
}
.zxw{
background: red;
width: 50%;
height: 50%;
position: absolute;
top: 0; left: 0;
bottom: 0; right: 0;
margin: auto;
}
</style>
</head>
<body>
<div id="box">
<div class="zxw"></div>
</div>
</body>
</html>
定位加位移居中法
適用於所有元素類型的父、子元素都沒有具體尺寸
- 父元素設置相對定位：
position:relative; - 子元素設置絕對定位：
position:absolute; left:50%; top:50%; - 子元素位移自身尺寸的一半：
transform: translate(-50%, -50%);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>標題</title>
<link rel="stylesheet" href="../css/reset.css">
<style type="text/css">
html,body{height: 100%;}
#box{
width: 50%; height: 50%;
margin: 0 auto; background: bisque;
position:relative
}
.zxw{
background: red;
/* width: 50%;
height: 50%; */
position: absolute;
left: 50%; top: 50%;
/* 水平位移自己寬度的一半 */
/* transform: translateX(-50%); */
/* 水平位移自己高度的一半 */
/* transform: translateY(-50%); */
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div id="box">
<!-- <div class="zxw"></div> -->
<span class="zxw">hhh</span>
</div>
</body>
</html>
彈性盒子居中法
終極方法；適用於所有元素類型的父、子元素都沒有具體尺寸
- 父元素設置成彈性盒子：
display:flex; - 父元素設置主軸方向居中對齊：
justify-content:center; - 父元素設置交叉軸方法居中對齊：
align-items:center;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>標題</title>
<link rel="stylesheet" href="../css/reset.css">
<style type="text/css">
html,body{height: 100%;}
#box{
width: 50%; height: 50%;
margin: 0 auto; background: bisque;
display: flex;
justify-content: center;
align-items: center;
}
.zxw{
background: red;
width: 50%;
height: 50%;
}
</style>
</head>
<body>
<div id="box">
<!-- <div class="zxw"></div> -->
<!-- <span class="zxw">hhh</span> -->
<img class="zxw" src="../img/timg.png" alt="">
</div>
</body>
</html>