css篇-前端面试中常问的div居中方法

上又要到秋招的时候了，又有不少人打算换工作了。前端在面试中总会被问到的一道基础题div居中方法，这里给大家总结一下都有哪些常用的方法。

绝对定位

父级元素（parent）采用相对定位（relative），需要居中的元素（demo）采用绝对定位（absolute）。
居中元素向上偏移50%，向左偏移50%，此时左顶点位于中心，不过我们需要的是整体居中，所以在偏移自身一半的宽高。（如下图）

还未偏移一半自身宽高

<style>
    .parent {
      position: relative;
      width: 500px;
      height: 500px;
      border: solid red 1px;
    }
    .demo {
      position: absolute;
      width: 100px;
      height: 100px;
      border: solid blue 1px;
      top: 50%;
      left: 50%;
      margin-top: -50px;
      margin-left: -50px;
    }
  </style>
  <body>
    <div class="parent">
      <div class="demo"></div>
    </div>
  </body>

弹性方法居中

通过flex弹性布局设置垂直居中和水平居中

  <style>
    .parent {
      width: 500px;
      height: 500px;
      border: solid red 1px;
      display: flex;
      // 垂直，水平居中
      align-items: center;
      justify-content: center;
    }
    .demo {
      width: 100px;
      height: 100px;
      border: solid blue 1px;
    }
  </style>
  <body>
    <div class="parent">
      <div class="demo"></div>
    </div>
  </body>

使用transform居中

在子元素不知道自身宽高情况，使用transform进行比偏移。

  <style>
    .parent {
      position: relative;
      width: 500px;
      height: 500px;
      border: solid red 1px;
    }
    .demo {
      position: absolute;
      border: solid blue 1px;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  </style>
  <body>
    <div class="parent">
      <div class="demo">居中</div>
    </div>
  </body>

以上3种是常用的方法，当然还有其他居中方法比如grid布局，table-cell布局等。

iv中的内容居中显示，包括水平和垂直2个方向。

<html>
<head>
    <style type="text/css">
        .box{
            height:400px;
            width:600px;
            background-color: #f2dede;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
        }
    </style>
</head>
<body>
<div class="box">
    <div style="background-color: #00a4e6">居中</div>
    <div style="background-color: #00b33c">居中</div>
</div>
</body>
</html>

说明：

align-items:center，控制垂直方向

justify-content:center，控制水平方向

弹性布局介绍：

Flex 弹性盒子布局是很强大的布局，它可以很方便的控制元素在垂直和水平方向上的行为。

使用display:flex

主轴和交叉轴

容器存在两个轴，水平叫主轴（Main-Axis），垂直叫交叉轴（Cross-Axis）。主轴左边是开始位置（main start）右边是结束位置（main end），交叉轴上是开始位置（cross start）下是结束位置（cross end）。用 justify 属性控制主轴项目的空隙，使用 align 属性控制交叉轴项目之间的垂直行为。

容器一共有 6 个属性：

flex-direction

flex-wrap

flex-flow

justify-content

align-items

align-content

#记录我的2024#

SS 是前端里面的基础之一，也是非常重要的一部分，它往往决定了你所做出来的网页页面是否美观。在设计网页页面的过程中，总会有将元素或者文字进行水平垂直居中的要求。下面w3cschool编程狮就为大家介绍 CSS 中几种常用到的水平垂直居中的方法。

一、使用 margin:auto

当元素有给定的高度以及宽度的时候，使用 margin: auto; 元素仅会水平居中，并不会进行垂直居中。此时就需要设置元素的 position 为 absolute，父级元素的 position 为 relative，同时元素的上下左右都需要设置为 0。

HTML 代码

<div class="box">
  <div class="center1"></div>
</div>

CSS 代码

.box{
  width: 200px;
  height: 200px;
  background-color: #eee;
  position: relative;
  margin-top: 20px;
}
.center1{
  width: 50px;
  height: 50px;
  background-color: #00ACED;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

效果展示：

二、使用 position:absolute

当已经知道了要进行水平垂直居中的元素的宽高时，就可以通过设置 position: absolute 来实现。但是，使用的同时还需要结合其他属性才完整实现。因为，单是设置 absolute，上左距离均为一半，就会出现下面这种情况。很显然可以看到，元素并不是完全居中，仅只有左上角的位置在中心点

概念图：

因此想要实现元素完全水平垂直居中，在设置了 absolute 定位后，可以设置 margin 值为负，或者使用 calc 来计算，上左距离在 50% 的基础上还要减去元素本身一半的宽高。

margin 值为负或者 calc 计算均是在已知元素宽高的情况下，假设不知道元素的宽高，那么怎么实现水平垂直居中呢？这里就可以使用 transform 属性，通过坐标位移来实现居中。

CSS 代码

/* 结合 margin */
.center2{
  width: 50px;
  height: 50px;
  background-color: #7FFFD4;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -25px;
  margin-top: -25px;
}
/* 结合 calc 计算*/
.center2{
  width: 50px;
  height: 50px;
  background-color: #7FFFD4;
  position: absolute;
  left: calc(50% - 25px)
  top: calc(50% - 25px);
}
/* 结合 transform */
.center2{
width: 50px;
height: 50px;
background-color: #7FFFD4;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}

效果展示

PART

三、使用弹性布局

可以通过弹性布局来设置水平垂直居中，这里需要设置父级元素 display:flex; 还需要设置两个属性，水平布局 justify-content 以及垂直布局 align-items。

HTML代码

<div class="box2">
  <div class="center4"></div>
</div>

CSS代码：

.box2{
  background-color: #eee;
  width: 200px;
  height: 200px;
  position: relative;
  margin-top: 20px ;
  display: flex;
  justify-content: center;
  align-items: center;
}
.center4{
  width: 50px;
  height: 50px;
  background-color: #B39873;
}

效果展示：

四、文本水平对齐和行高

前面介绍的是元素如何实现水平垂直居中，下面介绍的是如何将文字进行水平垂直居中。这第一个方法也是最经常用的，使用文本水平对齐 text-align 和行高 line-height 来实现的。

HTML 代码

<div class="box3">
  <div class="center5">文字居中</div>
</div>

CSS 代码

.box3{
  background-color: #eee;
  width: 200px;
  height: 200px;
  margin-top: 20px;
}
.center5{
  text-align: center;
  line-height: 200px;
}

效果展示

PART

五、使用网格布局

第二个方法可以通过网格布局 grid 来实现。而这里通过 grid 有两种方式实现，一种对元素本身属性进行设置，另一种在元素的父级元素中设置。两者看上去内容似乎差不多，不同的是在元素中设置的是 align-self 还要多了一个 margin，父级元素中是 align-items。

相关代码：

/* grid 元素中设置 */
.box4{
  background-color: #eee;
  width: 200px;
  height: 200px;
  margin-top: 20px;
  display: grid;
}
.center6{
  align-self: center;
  justify-content: center;
  margin: auto;
}
/* grid 父级元素中设置 */
.box5{
  background-color: #eee;
  width: 200px;
  height: 200px;
  margin-top: 20px;
  display: grid;
  align-items: center;
  justify-content: center;
}

效果展示：

六、总结

以上就是关于 CSS 如何将元素或者文字进行水平垂直居中的几种常用方法，大家还其他关于 CSS 实现水平垂直居中的方法吗？请在评论区留下你的想法。

关注w3cschool编程狮订阅更多IT资讯、技术干货~

在线咨询

上一篇：CSS实现文字竖向排版的简单方法
下一篇：细数几款免费好用的在线HTML编辑器

您的项目需求

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

整合营销服务商

css篇-前端面试中常问的div居中方法

绝对定位

弹性方法居中

使用transform居中

主轴和交叉轴

一、使用 margin:auto

二、使用 position:absolute

三、使用弹性布局

四、文本水平对齐和行高

五、使用网格布局

六、总结

您的项目需求