行内元素、块级元素居中

行内元素居中

水平居中

{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;
}