实现div水平垂直居中的7种方式

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

这道题可以考察候选人对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种方式。如果你有别的方式，欢迎和大家一起分析。

如果觉得文章对您有帮助，欢迎收藏，转发~

果 .parent 的 height 不写，你只需要 padding: 10px 0; 就能将 .child 垂直居中；
如果 .parent 的 height 写死了，就很难把 .child 居中

忠告：能不写死高度就不写死高度

demo地址 https://jsbin.com/cuyifid/edit?html,css,output

方法1：table 自带功能

使用 table 标签，自带的特性可以使元素垂直居中

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>使用 table 自带属性实现垂直居中</title>
</head>
<body>
  <table class="parent">
    <tr>
      <td class="child">
        内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
        内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
        内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
      </td>
    </tr>
  </table>
</body>
</html>
复制代码

CSS

<div id="parent">
<!-- 定义子级元素 -->
<div id="child">居中布局</div>
</div>

过以下CSS样式代码实现水平方向居中布局效果

.parent{position:relative;}
.child{position: absolute;top: 50%;transform: translateY(-50%)}

优点:

父级元素是否脱离文档流, 不影响子级元素垂直居中效果

缺点:

transform属性是CSS3中新增属性, 浏览器支持情况不好

在线咨询

上一篇：JavaScript+css实现的图片切换动画特效html页面前端源码
下一篇：零基础入门前端HTML知识整理

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。