让div居中的方式的几种方法

让div水平居中的方式的几种方法。

文章目录

一、margin
二、绝对定位
三、子元素绝对定位父元素相对定位
四、flex布局
总结

一、margin

第一种方式我们可以利用外边距属性来使div水平垂直居中

先来看一段有问题的代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>margin</title>
  <style>
    *{
      margin: 0;
      padding: 0; 
    }
    /* 父容器样式 */
    .container{
      height: 800px;
      background-color: black;
    }
    /* 子容器样式 */
    .son{
      width: 300px;
      height: 300px;
      background-color: white;
      /* 水平垂直居中 */
      margin: 250px auto;
    }
  </style>
</head>
<body>
    <!-- 父容器 -->
    <div class="container">
      <!-- 子容器 -->
      <div class="son"></div>
    </div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

效果在这里插入图片描述

可以看到，给子容器设置顶部外边距，连带父容器也被往下挤了，这是因为margin属性只有遇到边界才会"停下来"。边界就是border属性或者padding属性，因为父容器没有边界，所以子容器的外边距是相对父容器的父容器的，也就是body。所以我们想要让子容器相对父元素垂直居中，就要给父元素设置一个padding或者border。
正确的代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>margin</title>
  <style>
    *{
      margin: 0;
      padding: 0; 
    }
    /* 父容器样式 */
    .container{
      height: 800px;
      background-color: black;
      border: 1px solid;
      /* padding: 1px; */
    }
    /* 子容器样式 */
    .son{
      width: 300px;
      height: 300px;
      background-color: blue;
      /* 水平垂直居中 */
      margin: 250px auto;
    }
  </style>
</head>
<body>
    <!-- 父容器 -->
    <div class="container">
      <!-- 子容器 -->
      <div class="son"></div>
    </div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

在这里插入图片描述
margin:上下边距左右边距;
要让div水平居中，就要设置左右边距为auto,自适应。
要让div垂直居中，就要计算上下边距了，垂直居中的上下边距为父容器高度的一半减去子容器高度的一半。

二、绝对定位

正确代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>绝对定位</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    /* 父容器 */
    .container{
      height: 700px;
      position: relative;
      background-color: black;
    }
    /* 子容器 */
    .son{
      width: 300px;
      height: 300px;
      background-color: white;
      position:absolute;
      /* 水平垂直居中 */
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      margin: auto;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="son"></div>
  </div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

只要让子容器开启绝对定位，并且left、right、top、bottom全为0，margin:auto就能实现div水平垂直居中了。

三、子元素绝对定位父元素相对定位

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>子绝父相</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    /* 父容器 */
    .container{
      height: 700px;
      background-color: black;
       /* 父容器开启相对定位*/
      position: relative;
    }
    /* 子容器 */
    .son{
      width: 300px;
      height: 300px;
      background-color: white;
      /* 子容器开启绝对定位*/
      position:absolute;
      /* 水平垂直居中 */
      top: 50%;
      margin-top: -150px;
      left: 50%;
      margin-left: -150px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="son"></div>
  </div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

给父容器开启相对定位，子元素开启绝对定位。
水平居中 left: 50%;margin-left: -150px;
垂直居中 top: 50%;margin-top: -150px;
margin的值是子容器宽度或高度一半的负值
水平方向我们一般使用left,垂直方向一般使用top,以免出现问题。

四、flex布局

正确代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>flex布局</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    /* 父容器 */
    .container{
      height: 700px;
      background-color: black;
      /* 父容器开启flex布局 */
      display: flex;
      /* 水平垂直居中 */
      justify-content: center;
      align-items: center;
    }
    /* 子容器 */
    .son{
      width: 300px;
      height: 300px;
      background-color: white;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="son"></div>
  </div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

给父容器开启flex布局，父容器就变成flex容器了，子容器就变成flex项目了。
利用flex布局控制项目水平方向和垂直方向排列的属性使div垂直水平居中。
justify-content: center;水平居中
align-items: center;垂直居中

总结

可能讲述得不清楚，能看懂就好了。

原文参考：https://blog.csdn.net/qq_57443373/article/details/120179047

相关阅读:
训练DeeplabV3+来分割车道线
 十大免费好用的视频软件推荐，新手小白必备
 Linux文件编程(open read write close函数)
IDEA在多线程环境下断点调试-验证synchronized监视锁的运行状态
 Linux下gdb调试命令介绍
 一次性搞懂长轮询、短轮询、SSE、websocket区别
 东哥录了一些课程，你能想到应该都有了
 leetcode 剑指 Offer 33. 二叉搜索树的后序遍历序列
 Java 并发编程解析 | 关于Java领域中的线程机制，我们应该知道的那些事？
2022年合肥市蜀山区信息学区赛（小学组）
原文地址：https://blog.csdn.net/zch981964/article/details/127691471