多个子div在父中垂直居中

父元素内的子元素，在父里居中

.far {
  // flex布局 子元素居中
  display: flex;
  justify-content: center; // 水平居中
  align-items: center; // 垂直居中
}
1
2
3
4
5
6

1.在一个div下，有多个子div，且子div都是水平垂直居中

<template>
  <div>

    <div class="far">
      <!-- 注意需要多包裹一层 -->
      <div>
        <div class="son1">
          自定义长度
        </div>
        <div class="son2">
          固定长度
        </div>
        <div class="son3">
          <div class="son4">居中里的居中</div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
export default {
  data() {
    return {

    }
  },
}
</script>

<style lang="less" scoped>
div {
  text-align: center; // 这个很重要 ----------------
}

.far {
  width: 400px;
  height: 300px;
  background-color: #98f3cd;

  // flex布局 子元素居中
  display: flex;
  justify-content: center; // 水平居中
  align-items: center; // 垂直居中

  .son1 {
    background-color: cyan;

    // 如果需要自适应宽度和居中--打开这两行代码
    width: fit-content;
    margin: auto; // 解决自适应宽度的居中问题  --- 当前在父级居中
  }

  .son2 {
    background-color: cyan;
    width: 200px;
  }

  .son3{
    width: 100px;
    height: 160px;
    background-color: cyan;

    margin: auto; // 居中  --- 当前元素在父级居中

    // flex布局 子元素居中
    display: flex;
    justify-content: center;
    align-items: center;


    .son4 {
      background-color: pink;
      width: 60px;
      height: 60px;
    }
  }
}
</style>
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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80

2.

<template>
  <div>
  
    <div class="far">
      <!-- 注意需要多包裹一层 -->
      <div>
        <div class="son1">1</div>
        <div class="son2">22221</div>
      </div>
    </div>
    
  </div>
</template>

<script>
export default {
  data() {
    return {

    }
  },
}
</script>

<style lang="less" scoped>

div {
  text-align: center;
}

.far {
  width: 400px;
  height: 300px;
  background-color: #98f3cd;

  // flex布局居中
  display: flex;
  justify-content: center;
  align-items: center;

  .son1{
    background-color: cyan;

    // 如果需要自适应宽度和居中--打开这两行代码
    width: fit-content;
    margin:auto; // 解决自适应宽度的居中问题
  }
  .son2{
    background-color: cyan;
    width: 200px;
  }
}
</style>
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
40
41
42
43
44
45
46
47
48
49
50
51
52
53

2.横向居中（就少包裹一层div）

<template>
  <div>

    <div class="far">
        <div class="son1">1</div>
        <div class="son2">22221</div>
    </div>


  </div>
</template>

<script>
export default {
  data() {
    return {

    }
  },
}
</script>

<style lang="less" scoped>
div {
  text-align: center;
}

.far {
  width: 400px;
  height: 300px;
  background-color: #98f3cd;

  // flex布局居中
  display: flex;
  justify-content: center;
  align-items: center;

  .son1 {
    background-color: cyan;

    // 如果需要自适应宽度和居中--打开这两行代码
    width: fit-content;
  }

  .son2 {
    margin-left: 10px;
    background-color: cyan;
    width: 200px;
  }
}
</style>
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
40
41
42
43
44
45
46
47
48
49
50
51

3.flex布局排序

  <div>
    <div>flex布局:内部使用float布局不生效，可以使用 order 属性排序</div>
    <div class="far" style="display: flex;">
      <div class="son on1" style="order: 1;">1</div>
      <div class="son on2" style="order: 0;">2</div>
      <div class="son on3" style="order: 2;">3</div>
    </div>
  </div>
1
2
3
4
5
6
7
8