# 居中与浮动

垂直水平居中是一个老生常谈的问题了，挺无聊的。总结一下思路，大体分为定宽高和不定宽高。

# 固定宽高

# absolute + 负 margin

借助负 margin 来修复定位点是目标位左上角的问题

.wp1 {
    position: relative;
}

.box1 {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -50px;
}

1
2
3
4
5
6
7
8
9
10
11

# absolute + margin auto

定位四方距离都是 0，此时margin设为auto

.wp {
    position: relative;
}
.box {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

1
2
3
4
5
6
7
8
9
10
11

# absolute + calc

利用 css3 的calc计算定位偏移量，直接减去宽度的一半

.wp {
    position: relative;
}
.box {
    position: absolute;
    top: calc(50% - 50px);
    left: calc(50% - 50px);
}

1
2
3
4
5
6
7
8

# 不定宽高

# absolute + transform

利用 css3 的transform，transform的translate属性也可以设置百分比，其是相对于自身的宽和高。

.wp {
    position: relative;
}
.box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

1
2
3
4
5
6
7
8
9

# lineheight

利用行内元素居中属性

.wp {
    line-height: 300px;
    text-align: center;
    font-size: 0px;
}
.box {
    font-size: 16px;
    display: inline-block;
    vertical-align: middle;
    line-height: initial;
    text-align: left; /* 修正文字 */
}

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

# writing-mode

writing-mode可以改变文字的显示方向,且会修改所有 css 的属性方向。

.wp {
    writing-mode: vertical-lr;
    text-align: center;
}
.wp-inner {
    writing-mode: horizontal-tb;
    display: inline-block;
    text-align: center;
    width: 100%;
}
.box {
    display: inline-block;
    margin: auto;
    text-align: left;
}

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

# css-table

把普通元素，变为 table 元素的现实效果。

.wp {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
.box {
    display: inline-block;
}

1
2
3
4
5
6
7
8

# flex 布局

.wp {
    display: flex;
    justify-content: center;
    align-items: center;
}

1
2
3
4
5

# grid 布局

.wp {
    display: grid;
}
.box {
    align-self: center;
    justify-self: center;
}

1
2
3
4
5
6
7

TIP

点击此处 (opens new window)，查看上述代码在浏览器上的表现。

# 选取方案

PC 端有兼容性要求，宽高固定，推荐 absolute + 负 margin
PC 端有兼容要求，宽高不固定，推荐 css-table
PC 端无兼容性要求，推荐 flex
移动端推荐使用 flex

# 浮动问题

浮动元素会脱离文档流并向左/向右浮动，直到碰到父元素或者另一个浮动元素。

随着 flex 布局的使用场景越来越多，清除浮动这个场景也逐渐减少了。

# 添加空块级元素

clear 属性规定元素的哪一侧不允许其他浮动元素。

clear 属性会给清除元素（即设置了 clear 属性的元素）的上外边距之上添加清除空间，而元素本身的外边距并不改变。再说的详细一些，也就是给元素设置 clear:left|right|both 时，会使清除元素的上外边距边界刚好在该边上浮动元素的下外边距边界之下。

.content {
    background: pink;
}
.clearfix {
    clear: both;
}
.float {
    width: 50px;
    height: 50px;
    float: left;
    background: tan;
}

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

# height

父级给定高，解决了父级 div 无法自动获取到高度的问题。

# overflow

在父元素设置overflow:hidden可以使得形成 BFC,根据 BFC 内部规则，容器里面的子元素不会影响到外面的元素，计算 BFC 的高度时，浮动元素也参与计算。

# 父级 div 定义伪类：after 和 zoom

还是利用了clear属性。

<style type="text/css">
   .div1{background:#000080;border:1px solid red;}
   .div2{background:#800080;border:1px solid red;height:100px;margin-top:10px}

   .left{float:left;width:20%;height:200px;background:#DDD}
   .right{float:right;width:30%;height:80px;background:#DDD}

   /*清除浮动代码*/
   /* IE8以上和非IE浏览器才支持:after，
   zoom(IE专有属性)可解决ie6,ie7浮动问题 */
   .clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0}
   .clearfloat{zoom:1}
   </style>
<div class="div1 clearfloat">
    <div class="left">Left</div>
    <div class="right">Right</div>
</div>
<div class="div2">
   div2
</div>

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

当然清除浮动有很多乱七八糟的方法，比如父级也一起浮动，或者变成 table 等等，但他们的优点是没有优点。

← 盒模型单位与兼容 →