水平垂直居中 #4

kuckboy1994 · 2017-11-11T04:53:23Z

水平居中

若是行内元素，给改元素的父级设置text-align:center，即可实现行内元素水平居中。demo
若是块级元素, 该元素设置margin:0 auto。demo
若子元素包含float:left属性, 为了让子元素水平居中, 则可让父元素宽度设置为fit-content,并且配合margin, 作如下设置:demo
```
.fit-content {
    width: -moz-fit-content;
    width: -webkit-fit-content;
    width: fit-content;
    margin: 0 auto;
}
```
目前这个属性只支持Chrome和Firefox浏览器。

使用flex布局，可以很轻松的实现水平居中：demo

.parent {
    display: flex;
    justify-content: center;
}
.son {
    background-color: red;
    width: 100px;
    height: 20px;
}

.son 将会被水平居中

**使用CSS3盒模型，父元素display:box;box-pack:center;

.parent {
    display: -webkit-box;
    -webkit-box-orient: horizontal;
    -webkit-box-pack: center;

    display: -moz-box;
    -moz-box-orient: horizontal;
    -moz-box-pack: center;

    display: -o-box;
    -o-box-orient: horizontal;
    -o-box-pack: center;

    display: -ms-box;
    -ms-box-orient: horizontal;
    -ms-box-pack: center;
    
    display: box;
    box-orient: horizontal;
    box-pack: center;
}
.son {
    width: 100px;
    height: 10px;
    background-color: red;
}

没有深入了解。
基本介绍：display:box;是09年出来的。display: flex;是12年出来的。地址：“Old” Flexbox and “New” Flexbox。
看文章说在手机页面的时候，老机子display:flex会有问题的时候就需要box上场啦。

通过使用决定对位，以及负值的margin-left来实现：demo

.parent {
    position: relative;
}
.son {
    position: absolute;
    left: 50%;
    margin-left: -0.5 * 当前元素的宽度; 
    width: 100px;
    height: 10px;
    background-color: red;
}

使用CSS3中新增的transform属性，以及绝对定位:demo

.parent {
    position: relative;
}
.son {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
}

使用绝对定位，以及left:0;right:0;margin:0 auto;：demo

.parent {
    position: relative;
}
.son {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 100px;
    height: 10px;
    background-color: red;
}

垂直居中

元素是单行文本，设置line-height等于父元素的高度。demo
元素是行内块级元素, 基本思想是使用display: inline-block, vertical-align: middle和一个伪元素让内容块处于容器中央。demo
```
.parent {
    height: 100px;
}
.parent::after, .son{
    display:inline-block;
    vertical-align:middle;
}
.parent::after{
    content:'';
    height:100%;
    /*width: 10px;*/
    /*background-color: blue;*/
}
.son {
    width: 100px;
    height: 10px;
    background-color: red;
}
```
通过父元素创建一个看不见的伪类（宽度为0），高度为100%，同时设置为inline-block和vertical-align:middle使元素垂直居中。
这是一种很流行的方法, 也适应IE7。
可用vertical-align属性，而vertical-align只有在元素为td或者th时，才会生效，对于其他块级元素，例如div、p等，默认情况是不支持的。为了使用vertical-align，我们需要设置父元素display:table-cell;vertical-align:middle。demo
```
.parent {
    height: 100px;
    display: table-cell;
    vertical-align: middle;
}
.son {
    width: 100px;
    height: 10px;
    background-color: red;
}
```

使用flex布局，align-items: center;: demo

.parent {
    height: 100px;
    display: flex;
    align-items: center;
}
.son {
    width: 100px;
    height: 10px;
    background-color: red;
}

使用CSS3盒模型 demo

.parent {
    height: 100px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-box-pack: center;
    
    display: -moz-box;
    -moz-box-orient: vertical;
    -moz-box-pack: center;

    display: box;
    box-orient: vertical;
    box-pack: center;
}

通过使用决定对位，以及负值的margin-top来实现：demo

.parent {
    position: relative;
    height: 100px;
}
.son {
    position: absolute;
    top: 50%;
    margin-top: -0.5 * 高度的一半; 
    width: 100px;
    height: 10px;
    background-color: red;
}

使用CSS3中新增的transform属性，以及绝对定位:demo

.parent {
    position: relative;
    height: 100px;
}
.son {
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    width: 100px;
    height: 10px;
    background-color: red;
}

设置父元素相对定位position:relative，子元素如下css样式：demo

.parent {
    position: relative;
    height: 100px;
}
.son {
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto 0;
    width: 100px;
    height: 10px;
    background-color: red;
}