这道题可以稽核候选人对CSS布局办法的理解，而且非常贴近日常事情，比较适宜作为口试题。本日我就帮大家梳理一下CSS实现div水平垂直居中的方法，建议收藏。
为了演示，首先创建两个嵌套的 div，然后设置一下大小和背景颜色这样比较随意马虎看出效果。代码如下：
// html<div class="outer outer-box"> <div class="inner inner-box"></div></div>// css<style>.outer { height: 100px; width: 100px; background-color: royalblue;}.inner { height: 50px; width: 50px; background-color: red;}<style>
设置完的效果便是这样，然后我们须要把内部的div 水平垂直居中。准备就绪，正式开始。我们分别利用 Flex 布局，Position布局， Grid布局三种办法。
flex布局
Flex 是Flexible Box的缩写，意为”弹性布局”。Flexible Box 模型是一种一维的布局模型，一次只能处理一个维度上的布局。flex布局有两根轴线，主轴和交叉轴。flex便是根据这两个轴线布局元素。
1.1 对外层div设置flex布局
在外层 div 上设置 justify-content: center; align-items: center; 属性， display 设置为 flex。即可实现水平垂直居中。
1.2 内外div分别设置
结果如下图：
Flex实现水平处置居中
Position布局
Position布局是传统的布局办法，position属性指定定位办法，利用CSS盒模型实现定位布局。
2.1 内部div利用 margin 属性居中
2.2 内部 div 利用 transform 属性居中
实现结果如下：
Grid布局
Grid（网格）布局被称为最强大的CSS布局方案，它可以将一个页面划分为几个紧张区域，以及定义这些区域的大小、位置、层次等关系。
上面这种布局，Grid非常善于。Flex布局属于一维布局，Grid布局可以将容器分为行和列，对单元格进行布局，属于二维布局。
3.1 外层div利用 place-content 属性
3.2 外层div利用Grid布局
3.3 内外div分别设置
实现结果如下：
总结
常见的问题也不见得大略，前端知识还是常学常新的。理解不同类型的CSS布局办法，对处理实际问题也很有帮助。
以上便是CSS实现div水平垂直居中的7种办法。如果你有别的办法，欢迎和大家一起剖析。
如果以为文章对您有帮助，欢迎收藏，转发~
