在前端面试中，CSS相关的问题一般不会问的太多，但是有一个问题经常被选为面试题。那就是：div 水平垂直居中你有哪些办法？7ys快乐收录网

 7ys快乐收录网

这道题可以考察候选人对CSS布局方式的理解，而且非常贴近日常工作，比较适合作为面试题。今天我就帮大家梳理一下CSS实现div水平垂直居中的方法，建议收藏。7ys快乐收录网

---

为了演示，首先创建两个嵌套的 div，然后设置一下大小和背景颜色这样比较容易看出效果。代码如下：7ys快乐收录网

 7ys快乐收录网

// 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布局三种方式。7ys快乐收录网

 7ys快乐收录网

flex布局

Flex 是Flexible Box的缩写，意为”弹性布局”。Flexible Box 模型是一种一维的布局模型，一次只能处理一个维度上的布局。flex布局有两根轴线，主轴和交叉轴。flex就是根据这两个轴线布局元素。7ys快乐收录网

1.1 对外层div设置flex布局7ys快乐收录网

在外层 div 上设置 justify-content: center; align-items: center; 属性， display 设置为 flex。即可实现水平垂直居中。7ys快乐收录网

 7ys快乐收录网

1.2 内外div分别设置7ys快乐收录网

 7ys快乐收录网

 7ys快乐收录网

结果如下图：7ys快乐收录网

Flex实现水平处置居中7ys快乐收录网

 7ys快乐收录网

Position布局

Position布局是传统的布局方式，position属性指定定位方式，利用CSS盒模型实现定位布局。7ys快乐收录网

2.1 内部div使用 margin 属性居中7ys快乐收录网

 7ys快乐收录网

2.2 内部 div 使用 transform 属性居中7ys快乐收录网

 7ys快乐收录网

实现结果如下：7ys快乐收录网

 7ys快乐收录网

Grid布局

Grid（网格）布局被称为最强大的CSS布局方案，它可以将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系。7ys快乐收录网

 7ys快乐收录网

上面这种布局，Grid非常擅长。Flex布局属于一维布局，Grid布局可以将容器分为行和列，对单元格进行布局，属于二维布局。7ys快乐收录网

 7ys快乐收录网

3.1 外层div使用 place-content 属性7ys快乐收录网

 7ys快乐收录网

3.2 外层div使用Grid布局7ys快乐收录网

 7ys快乐收录网

3.3 内外div分别设置7ys快乐收录网

 7ys快乐收录网

实现结果如下：7ys快乐收录网

 7ys快乐收录网

总结

常见的问题也不见得简单，前端知识还是常学常新的。了解不同类型的CSS布局方式，对处理实际问题也很有帮助。7ys快乐收录网

以上就是CSS实现div水平垂直居中的7种方式。如果你有别的方式，欢迎和大家一起分析。7ys快乐收录网

7ys快乐收录网

　　《html居中代码怎么写（html垂直居中写法）》更新于时间：2022-07-12 22:23:14；由本站小编进行发布，目前浏览的小伙伴达到，感谢你们的支持，后期快乐收录网小编会继续为大家更新更多相关的文章，希望广大网友多多关注快乐收录网工作心得栏目，如果觉得本站不错，那就给我们一个分享的支持吧！

html居中代码怎么写（html垂直居中写法）特别声明

本站快乐收录网提供的html居中代码怎么写（html垂直居中写法）都来源于网络，不保证文章的准确性和真实性，同时，对于该文章所造成的影响，不由快乐收录网实际控制，在2022-07-12 22:23:14收录时，该网页上的内容，都属于合规合法，如有侵权违规，可以直接联系网站管理员进行整改或删除，快乐收录网不承担任何责任。

快乐收录网：致力于优质、实用的网络站点资源收集与分享！本文地址：https://nav.klxjz.cn/zixundaquan/wzyh/202207/10416.html转载请注明

标签：