一、如何使一个盒子水平垂直居中
方法一：利用定位
html代码片段：
<body>
<div class="parent">
<div class="child">我是子元素</div>
</div>
</body>
css代码片段：
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
方法二：利用 margin:auto
html代码片段：
<body>
<div class="parent">
<div class="child">我是子元素</div>
</div>
</body>
css代码片段：
Document
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
方法三：利用 display:table-cell
html代码片段：
<body>
<div class="parent">
<div class="child">我是子元素</div>
</div>
</body>
css代码片段：
方法四：利用 display：flex;设置垂直水平都居中
html代码片段：
<body>
<div class="parent">
<div class="child">我是子元素</div>
</div>
</body>
css代码片段：
方法五：计算父盒子与子盒子的空间距离(这跟方法一是一个道理)
html代码片段：
<body>
<div class="parent">
<div class="child">我是子元素</div>
</div>
</body>
css代码片段：
方法六：利用 transform
html代码片段：
<body>
<div class="parent">
<div class="child">我是子元素</div>
</div>
</body>
css代码片段：
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
二、如何实现双飞翼（圣杯）布局？
1、利用定位实现两侧固定中间自适应
1、父盒子设置左右 padding 值
2、给左右盒子的 width 设置父盒子的 padding 值,然后分别定位到 padding 处
3、中间盒子自适应
html代码片段：
<div class="father">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
css代码片段：
- 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
2、利用 flex 布局实现两侧固定中间自适应
1、父盒子设置 display:flex;
2、左右盒子设置固定宽高
3、中间盒子设置 flex:1
html代码片段：
<div class="father">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
css代码片段：
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
3、利用 bfc 块级格式化上下文, 实现两侧固定中间自适应
1、左右固定宽高，进行浮动
2、中间 overflow: hidden;
html代码片段：
<!-- 注意:left 和 right 必须放在 center 前面 -->
<div class="father">
<div class="left"></div>
<div class="right"></div>
<div class="center"></div>
</div>
css代码片段：
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
