设定行高（line-height）
适用于单行的行内元素 （inline、inline-block）![[Pasted image 20240407221649.png|297]]
下面是css代码演示
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
/* 让body铺满整个视口 */
margin: 0;
/* 清除默认的body margin */
}
/* div0盒子会在页面垂直居中 */
/* 单行行内元素演示（因为多行的话第二行第三行会和第一行挤在一起，
就不是垂直居中了
例如单行的标题，或是已经设为inline-block属性的div，
若将line-height设成和高度一样的数值，则内容的行内元素就会被垂直居中，
因为是行高，
所以会在行内元素的上下都加上行高的 */
.div0 {
width: 200px;
height: 150px;
border: 2px solid #444141;
/* 设置line-height和align */
line-height: 150px;
/* 垂直 */
text-align: center;
/* 居中 */
}
.box {
display: inline-block;
/*设置内联样式 内联到父元素*/
width: 30px;
height: 30px;
background-color: rgb(202, 248, 248);
}
补充知识点：![[Pasted image 20240408203402.png|650]]Flexbox布局水平居中、垂直居中、等分空间、响应式布局等
容器和项目：
主轴和交叉轴：
主轴和交叉轴对齐：
弹性容器的属性：
弹性项目的属性：
添加伪元素
多行的元素垂直居中vertical-align:父元素内的所有元素垂直位置互相挨在一起居中（排排坐，居中但不垂直，可以自己试试）如果有一个方块变成了高度100%，那么其他的方块就会真正的垂直居中![[Pasted image 20240407223048.png]]
.div1{
width: 200px;
height: 150px;
border: 1px solid #000;
text-align: center;
}
.pinkbox{
width: 30px;
height: 30px;
background-color: pink;
display: inline-block;
vertical-align: middle;
}
.greenbox {
width: 30px;
height: 100%;
background-color: rgb(175, 233, 175);
display: inline-block;
vertical-align: middle;
}
.yellowbox {
width: 30px;
height: 60px;
background-color: rgb(249, 249, 182);
display: inline-block;
vertical-align: middle;
}
但是不能每次垂直居中都要写一个奇怪的div在里面充当100%柱子，所以添加伪元素：利用::before和::after添加div，让这个“伪”div的高度100%，就可以让其他的div都居中。div记得要把display设为inline-blockvertical-align:middle；是针对行内元素，div本身是block
.div1::before{
content:'';
width:0;
height:100%;
display:inline-block;
position:relative;
vertical-align:middle;
background:#f00;
}
calc动态计算
如果div必须要是block，用calc动态计算，让要居中的div的top属性，与上方的距离是“50%的外框高度+ 50%的div高度”，就可以做到垂直居中，至于为什么不用margin-top，因为margin相对的是水平宽度（相对于父级盒子的），必须要用top才会正确。![[Pasted image 20240408142553.png|373]]![[051023d15da4230d8b68615e8cba490e.png|625]]
.div2 {
width: 200px;
height: 150px;
border: 1px solid#000;
}
.blackbox {
width: 30px;
height: 30px;
background-color: black;
float: left;
top: calc(50% - 15px);
margin-left: calc(50% - 45px);
}
.redbox {
width: 30px;
height: 80px;
background-color: red;
float: left;
top: calc(50% - 40px);
}
.gerybox{
width: 30px;
height: 40px;
background-color: #444141;
float: left;
top: calc(50% - 20px);
}
补充知识点：==display属性==，控制元素如何在页面中显示
static：默认值。正常的文档流进行定位，即元素出现在其在HTML代码中的位置。top、right、bottom、left和z-index属性对static定位的元素无效。
relative：相对定位的元素相对于其正常位置进行定位。使用top、right、bottom或left属性，不会脱离文档流。
absolute：绝对定位的元素相对于最近的已定位祖先元素（即position不是static的祖先元素）如果没有已定位的祖先元素，那么它会相对于初始包含块进行定位，通常是浏览器窗口。会脱离文档流，这意味着它们不会影响其他元素的位置
fixed：固定定位的元素相对于浏览器窗口进行定位，即使页面滚动，它也始终会停留在同一的位置。固定定位的元素也会脱离文档流。
sticky：粘性定位可以被看作是相对定位和固定定位的混合。元素在跨越特定滚动阈值之前为相对定位，之后为固定定位。这常用于实现滚动到特定位置时元素固定在视口的效果。
inherit：元素继承其父元素的position属性值。
在使用position属性时，还应考虑z-index属性，它控制元素的堆叠顺序（哪个元素在另一个元素的上面或下面）。对于已定位的元素（即position不是static的元素），z-index属性有效。
表格
在表格这个HTML里面常用的DOM里，只需要下一行vertical-align:middle就可以。表格与单元格（table和table-cell）是 HTML（HyperText Markup Language）中的一个标签，它代表表格中的一个数据单元格（table data）。当display属性设置为table-cell时，它会使元素表现得像一个表格单元格。这意味着，尽管元素可能不是或其他表格相关元素，但它会遵循表格单元格的某些布局和行为规则。（二者差不多）
DOM是“文档对象模型”(Document Object Model)的缩写。是网页的编程接口，它将web页面和脚本或编程语言连接了起来。HTML：
<table>
<tr>
<td>
<div>表格垂直居中div>
td>
tr>
table>
<div class="like-table">
<div>假的表格垂直居中div>
div>
CSS：
.like-table{
display:table-cell;
}
td,
.like-table{
width:150px;
height:100px;
border:1px solid #000;
vertical-align: middle;
}
td div,
.like-table div{
width:100px;
height:50px;
margin:0 auto;
color:#fff;
font-size:12px;
line-height: 50px;
text-align: center;
background:#c00;
}
.like-table div{
background:#069;
}
transform
transform属性：平移：transform:translate(100px,- 50px)
![[Pasted image 20240408171509.png|198]]
.use-transform{
width: 200px;
height: 200px;
border: 1px solid #000;
position: relative;
}
.use-transform div{
position: absolute;
width: 100px;
height: 50px;
top: 50%;
transform: translateY(-50%);
background-color: rgb(200, 210, 219);
}
/*水平居中 横着在中间
垂直居中 竖着在中间
水平垂直居中 横竖都在中间*/
绝对定位
子绝父相
.use-absolute{
position: relative;
width:200px;
height:150px;
border:1px solid #000;
}
.use-absolute div{
position: absolute;
width:100px;
height:50px;
top:0;
right:0;
bottom:0;
left:0;
margin:auto;
background:#f60;
}
用负margin