CSS：
重点：父容器高度和子元素line-height一样的数值，内容中的行内元素就会垂直居中。
HTML：
CSS：
重点：给父元素添加一个伪元素::before，让这个伪元素的div高度为100%，这样其他div就可垂直居中了，但div 本身就是块级元素，而vertical-align是行内元素属性，则需要修改为inline-block。
HTML：
CSS：
重点：在父元素中设置相对定位position: relative，子元素设置绝对定位 position: absolute；top和left相对父元素的50%，与其搭配的 transformse: translate(-50% , -50%)表示X轴和Y轴方向水平居中。
HTML：
CSS：
重点：子元素绝对定位position:absolute,父元素相对定位position: relative，将上下左右的数值都设置为0，同时margin:auto。绝对定位是会脱离文档流的，这点要注意一下。
HTML：
CSS：
重点：给父元素设置display: flex布局，水平居中 justify-content: center，垂直居中align-items: center。
HTML：
CSS：
重点：父元素position定位为relative，子元素position定位为absolute。水平居中同理。calc居中要减多少要结合到自己的宽高设置多少再进行计算。
HTML：
CSS：
重点：将父元素设置display:table，子元素table-cell会自动撑满父元素。组合 display: table-cell、vertical-align: middle、text-align: center完成水平垂直居中。
CSS是层叠样式表。下面，我们来看看怎么使用CSS让图片水平垂直都居中吧。
01新建一张文档
在桌面新建一张文本文档，改名为1.txt，如下图所示：
02基础代码
然后打开文本文档，编写基础代码，再把桌面上的老虎图片引入进去，如下图所示：
03后缀名
然后把文本文档后缀名改为.html，如下图所示：
04运行网页
然后在浏览器中运行网页，现在图片有了，只是还没有居中，图片居住代码要用CSS写，如下图所示：
05CSS代码
然后写上CSS代码，如下图所示：
06垂直水平居中
可以看到图片已经垂直和水平居中，如下图所示：
07总代码
<!DOCTYPE html>
<head>
<title>html</title>
<style type="text/css">
.picTiger{
margin: auto
position: absolute
top: 0
left: 0
bottom: 0
right: 0
}
</style>
</head>
<body>
<img class="picTiger" src="C:/Users/Administrator/Desktop/1.png">
</body>
<html>
要div垂直居中,最好的方法就是让height和ling-height的数值一致.比如
<div
style="height:30pxline-height:30px">
xxx
</div>
这样,里面的内容xxx就会垂直居中显示!
然后再使其水平居中,使用text-align
例子:
<div
style="height:30pxline-height:30pxtext-align:center">
xxx
</div>
这样,垂直+水平就居中了.line-height是css中能够方便设置字的垂直位置的好方法~!
![[前端][CSS] 纯css实现纵向滚动固定表头与横向内容滚动](/aiimages/%5B%E5%89%8D%E7%AB%AF%5D%5BCSS%5D+%E7%BA%AFcss%E5%AE%9E%E7%8E%B0%E7%BA%B5%E5%90%91%E6%BB%9A%E5%8A%A8%E5%9B%BA%E5%AE%9A%E8%A1%A8%E5%A4%B4%E4%B8%8E%E6%A8%AA%E5%90%91%E5%86%85%E5%AE%B9%E6%BB%9A%E5%8A%A8.png)
