行內元素居中
水平居中
{text-align：center;}
垂直居中
- 單行——行高等于盒子高度
<head><style>.father {width: 400px;height: 200px;/* 行高等于盒子高度：line-height: 200px; */line-height: 200px;background-color: pink;}.son {}</style>
</head>
<body><div class="father"><span class="son">我是行內元素，我想垂直居中</span></div>
</body>- 垂直居中：多行——display:table-cell、vertical-align: middle
<head><style>.father {width: 400px;height: 200px;/* 主要代碼：display: table-cell; vertical-align: middle;*/display: table-cell;background-color: pink;vertical-align: middle;}.son {}</style>
</head>
<body><div class="father"><span class="son">我是行內元素，我想垂直居中。我是行內元素，我想垂直居中。我是行內元素，我想垂直居中。我是行內元素，我想垂直居中。我是行內元素，我想垂直居中。我是行內元素，我想垂直居中。</span></div>
</body>效果如下：
- 多行文字水平垂直居中
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>table</title><style>.parent{display: table;width: 400px;height: 400px;text-align: center;border:1px solid red;}.child{display: table-cell; /*子元素成為表格單元格（類似 <td> 和 <th>）*/background: yellow;vertical-align: middle; /*表格容器可以設置垂直對齊屬性*/white-space: pre-line;/* 合并空白符序列，但是保留換行符。 */}</style>
</head>
<body><div class="parent"><div class="child">33 22多行居中 達到多行居中多行居中多行居中多行居中</div></div></body>
</html>
塊級元素居中
可以讓一個盒子實現水平居中，需要滿足一下兩個條件：
- 必須是塊級元素。
- 盒子必須指定了寬度（width）
水平居中
- 使用margin
{ width:960px; margin:0 auto;}
- 使用定位
盒子寬高已知， position: absolute; left: 50%; margin-left:-自身一半寬度;
<head><style>.father {width: 400px;height: 200px;background-color: pink;position: relative;}.son {width: 200px;height: 100px;background-color: skyblue;position: absolute;left: 50%;/* 如果元素沒有設置寬度，不能使用margin-left，可以使用transform: translateX(-50%); 效果相同*/margin-left: -100px;}</style>
</head>
<body><div class="father"><div class="son">我是塊級元素，我想水平居中。</div></div>
</body>
</html>- 使用flex
<head><style>.father {width: 400px;height: 200px;background-color: pink;display: flex;justify-content: center;}.son {width: 200px;height: 100px;background-color: skyblue;}</style>
</head>
<body><div class="father"><div class="son">我是塊級元素，我想水平居中。</div></div>
</body>
</html>垂直居中
- 使用定位
盒子寬高已知， position: absolute; top: 50%; margin-top:-自身一半高度;
<head><style>.father {width: 400px;height: 200px;background-color: pink;position: relative;}.son {width: 200px;height: 100px;background-color: skyblue;position: absolute;top: 50%;/* 如果元素沒有設置高度，不能使用margin-top，可以使用transform: translateY(-50%); 效果相同*/margin-top: -50px;}</style>
</head>
<body><div class="father"><div class="son">我是塊級元素，我想垂直居中。</div></div>
</body>
</html>- 使用flex
<head><style>.father {width: 400px;height: 200px;background-color: pink;display: flex;align-items: center;}.son {width: 200px;height: 100px;background-color: skyblue;}</style>
</head>
<body><div class="father"><div class="son">我是塊級元素，我想垂直居中。</div></div>
</body>
</html>水平垂直居中
- 使用定位
<!DOCTYPE html>
<html lang="zh-cn">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>定位 水平垂直居中</title><style>* {margin: 0;padding: 0;}html,body {height: 100%;}.box {position: absolute;top: 50%;margin-top: -50px;left: 50%;margin-left: -50px;/* transform: translate(-50%, -50%); */width: 100px;height: 100px;background-color: red;}</style>
</head><body><div class="box"></div>
</body>
</html>
這種方法不推薦，因為當盒子寬高不是偶數的時候，一般會出現小數點，推薦使用以下方式，比較省事，讓瀏覽器自己去計算。
- 讓外邊距自動拉扯元素位置進行平衡
- 設置 margin為 auto
- top left right bottom 四個方向設置為0
- 讓外邊距自動拉扯元素位置進行平衡
<!DOCTYPE html>
<html lang="zh-cn">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>定位 定位居中</title><style>* {margin: 0;padding: 0;}html,body {height: 100%;}.box {position: absolute;top: 0;left: 0;bottom: 0;right: 0;margin: auto;width: 113px;height: 100px;background-color: red;}</style>
</head><body><div class="box"></div>
</body>
</html>
- 使用flex
.container {height: 100vh; /*使容器高度為100視口高度，使容器占據整個屏幕 */display: flex;justify-content: center;align-items: center;
}
.content {background-color: #cccccc;width:20 px;height: 20px;
}
