学习笔记（一）
div水平垂直居中的七种方法
文章目录
学习笔记（一）前言一、绝对定位法1.方法一2.方法二3.方法三4.方法四 二、flex布局法1.方法五 三、将小div转成行内块1.方法六 四、网格布局1.方法七 总结前言
在写小demo过程中，经常会遇到需要将一个div水平和垂直两个方向同时居中的情况，针对这种情况，我们有几种方法可以实现提示：以下是本篇文章正文内容，下面案例可供参考
一、绝对定位法
绝对定位方式可分为以下三种方法：
1.方法一
在绝对定位下，topbottomleftright四个值都为0，margin:auto。
代码如下（实例）：
html:
<div class="box"><div class="small"></div></div>
css:
.box{width: 500px;height: 500px;border: 3px solid #f00;position: relative; text-align: center;line-height: 500px;}.small{width: 100px;height: 100px;background-color: #00f;position: absolute;left: 0;top: 0;bottom: 0;right: 0;margin: auto;}
效果展示：
2.方法二
这种方法可以直接不用管盒子宽高具体数值，在绝对定位下，topleft都设为50%，然后用平移的方法向左、向上分别移动小盒子的50% （transform: translate(-50%, -50%);）
代码如下（实例）：
（这里html代码一样，我就不多赘述了~）
css:
.small{width: 100px;height: 100px;background-color: #00f;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);}
3.方法三
这种方法和方法二差不多，但是前提是得知道子盒子宽高的具体数值。 在绝对定位下，lefttop都设为50%，然后用margin的方法，左、上外边距分别为子盒子宽、高的一半像素的负值
代码如下（实例）：
（这里html代码一样，我就不多赘述了~）
css:
这里子盒子宽高都是100px，所以外边距的值为 margin: -50px 0 0 -50px;
.small{width: 100px;height: 100px;background-color: #00f;position: absolute;left: 50%;top: 50%;margin: -50px 0 0 -50px;}
4.方法四
在绝对定位下，利用calc() 函数动态计算实现水平垂直居中
代码如下（示例）：
css
left:calc((400px - 200px)/2); top:calc((160px - 50px)/2);
.box{width: 500px;height: 500px;border: 3px solid #f00;position: relative; }.small{width: 100px;height: 100px;background-color: #00f;position: absolute;left:calc((500px - 100px)/2);top:calc((500px - 100px)/2);}
二、flex布局法
1.方法五
为子盒子的父级元素添加flex方法
代码如下（示例）：
display: flex; align-items: center; justify-content: center;
css:
.box {width: 500px;height: 500px;border: 3px solid #f00;display: flex;align-items: center;justify-content: center;}.small {width: 100px;height: 100px;background-color: #00f;}
三、将小div转成行内块
1.方法六
在小div后，新增span标签，给小盒子设置vertical-align:middle 给大盒子设置line-height为大盒子高度，text-align:center
代码如下（示例）：
html:
<div class="box"><div class="small"></div><span></span></div>
css:
.box {width: 500px;height: 500px;border: 3px solid #f00;}.small{width: 100px;height: 100px;background-color: #00f;display: inline-block;/* 修饰的是行内块垂直的对齐方式参考谁进行垂直对齐 - 当前行*/vertical-align: middle;}
四、网格布局
1.方法七
为子盒子的父元素添加grid变成网格布局，设置成一行一列的网格，再将其垂直水平居中。
代码如下（示例）：
grid-template-columns: 100px;
grid-template-rows: 100px;
justify-content: center;
align-content: center;
css:
.box {width: 300px;height: 300px;border: 3px solid #f00;margin: 200px auto;display: grid;grid-template-columns: 100px;grid-template-rows: 100px;/* justify-content: center;align-content: center; *//* 复合写法 垂直对齐方式 水平对齐方式*/place-content: center center;}.small {width: 98px;height: 98px;border: 1px solid blue;}
总结
以上就是如何将小div水平垂直居中的七种方法啦！多总结，多积累
