定宽 | 前端足迹

# 定宽

  <div class="father">
    <div class="son"></div>
  </div>

1
2
3

# 1. 绝对定位 + margin负值

.father{
  position:relative;
  height: 400px;
  width: 400px;
  border: 1px solid rgb(9, 198, 240);
}
.son{
   position: absolute;
    width: 100px;
    height: 100px;
    background: yellow;
    left: 50%;
    top: 50%;
    margin-left: -50px;
    margin-top: -50px; 
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# 2. 绝对定位 + transform

.father{
  position:relative;
  height: 400px;
  width: 400px;
  border: 1px solid rgb(9, 198, 240);
}
.son{
    position: absolute;
    width: 100px;
    height: 100px;
    background: yellow;
    left: 50%;
    top: 50%;
    transform:translate(-50%,-50%)
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# 3. 绝对定位 + left/right/bottom/top + margin

  .father {
    position: relative;
    height: 400px;
    width: 400px;
    border: 1px solid rgb(9, 198, 240);
  }
  .son {
    position: absolute;
    width: 100px;
    height: 100px;
    background-color: brown;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
  }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# 4. flex布局

  .father {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 400px;
    width: 400px;
    border: 1px solid rgb(9, 198, 240);
  }
  .son {
    width: 100px;
    height: 100px;
    background-color: brown;
  }

1
2
3
4
5
6
7
8
9
10
11
12
13

# 5. grid布局 + margin

  .father {
    display: grid;
    height: 400px;
    width: 400px;
    border: 1px solid rgb(9, 198, 240);
  }
  .son {
    width: 100px;
    height: 100px;
    background-color: brown;
    margin: auto;
  }

1
2
3
4
5
6
7
8
9
10
11
12

# 6. table-cell + vertical-align + inline-block/margin: auto

  .father {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    height: 400px;
    width: 400px;
    border: 1px solid rgb(9, 198, 240);
  }
  .son {
    width: 100px;
    height: 100px;
    background-color: brown;
    /* margin: auto; */
    display: inline-block;
  }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# 不定宽高

<div class="father">
  <div class="son">1111</div>
</div>

1
2
3

# 1. 绝对定位 + transform

  .father {
    position: relative;
    height: 400px;
    width: 400px;
    border: 1px solid rgb(9, 198, 240);
  }
  .son {
    position: absolute;
    background-color: brown;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }

1
2
3
4
5
6
7
8
9
10
11
12
13

# 2. table-cell + vertical-align + inline-block

  .father {
    height: 400px;
    width: 400px;
    border: 1px solid rgb(9, 198, 240);
    display: table-cell;
    text-align: center;
    vertical-align: middle;
  }
  .son {
    background-color: brown;
    display: inline-block;
  }

1
2
3
4
5
6
7
8
9
10
11
12

# 3. flex布局

  .father {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 400px;
    width: 400px;
    border: 1px solid rgb(9, 198, 240);
  }
  .son {
    background-color: brown;
  }

1
2
3
4
5
6
7
8
9
10
11

# 4. flex布局 + margin:auto

  .father {
    display: flex;
    height: 400px;
    width: 400px;
    border: 1px solid rgb(9, 198, 240);
  }
  .son {
    background-color: brown;
    margin:auto
  }

1
2
3
4
5
6
7
8
9
10

# 5. grid布局 + margin:auto

  .father {
    display: grid;
    height: 400px;
    width: 400px;
    border: 1px solid rgb(9, 198, 240);
  }
  .son {
    background-color: brown;
    margin:auto
  }

1
2
3
4
5
6
7
8
9
10

参考链接 (opens new window)

← BFC 实现两栏布局 →