css 水平垂直居中方式

html 结构如下：

<div class="box">
    <div class="item">一些内容空间</div>
</div>

方式：

1.absolute 50%定位 + 负值 margin

先利用绝对定位将子元素定位到左边和上边都为 50% ，但是这时候是子元素的 左边界 和 上边界 分别距离父级 左边界和上边界的 中间位置，子元素的宽高实际上在中心位置的右下边，为了居中，使用 margin-left 和 margin-top 各为负数的子元素的一半尺寸即可。该方式必须显式定义子元素的 width height ：

.box{
    position:relative;
    width:800px;
    height:800px;
    border:2px solid #c00;
}
.item{
    position:absolute;
    left:50%;
    top:50%;
    margin-left:-100px;
    margin-top:-100px;
    width:200px;
    height:200px;
    background-color: #c00;
}

2.利用 absolute 定位设为0 + margin auto

该方式必须显式定义子元素的 width height ：

.box{
    position:relative;
    width:800px;
    height:800px;
    border:2px solid #c00;
}
.item{
    position:absolute;
    left:0;
    top:0;
    right:0;
    bottom:0;
    margin:auto;
    width:200px;
    height:200px;
    background-color: #c00;
}

3.absolute + calc()

思想方法同第一种方式相似，只不过这里是利用 calc 直接将目标位置计算出来，而不是先定位再偏移。该方式必须显式定义子元素的 width height ：

.box{
    position:relative;
    width:800px;
    height:800px;
    border:2px solid #c00;
}
.item{
    position:absolute;
    left:calc(50% - 100px);
    top:calc(50% - 100px);
    width:200px;
    height:200px;
    background-color: #c00;
}

4.absolute + transform

思想同第一种方式，先定位到中间位置，再利用 transform 偏移回去子元素一半的尺寸。该方式不必显式定义子元素的 width height ，即可以不用知道子元素的宽高：

.box{
    position:relative;
    width:800px;
    height:800px;
    border:2px solid #c00;
}
.item{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    background-color: #c00;
}

5.table 方式 table-cell+ text-align + vertical-align + 子元素 display:inline-block 或 inline

css 新增的 table 属性，可以将普通元素变为 table 元素的显示效果，可以通过这种方式实现垂直居中。可以不用知道子元素的尺寸大小：

.box{
    position:relative;
    width:800px;
    height:800px;
    border:2px solid #c00;
    display:table-cell;
    text-align: center;
    vertical-align: middle;
}
.item{
    display: inline-block;
    text-align: left; /* 校正文字左对齐 */
    background-color: #c00;
}

6.display:line-height + inline-block 方式

这种方式里面需要将父元素的 line-height = height ，并且 text-align:center。子元素 display:inline-block，vertical-align:middle。这种方式可以不用知道子元素的尺寸大小：

.box{
    width:800px;
    height:800px;
    border:2px solid #c00;
    text-align: center;
    line-height:800px;
}
.item{
    display:inline-block;
    vertical-align: middle;
    background-color: #c00;
    line-height: initial;
    text-align:left;/* 修复文本左对齐 */
}

7.如果是需要 item 内部的文本元素垂直居中，可以使用 line-height = height + text-align:center

.item{
    line-height:100px;
    height:100px;
    text-align:center;
    background-color: #c00;
}

 

8.flex方式

flex 方式一：

利用父级的 justify-content 和 align-items 实现垂直居中布局。可以不必知道子元素尺寸：

.box{
    width:800px;
    height:800px;
    border:2px solid #c00;
    display:flex;
    justify-content: center;
    align-items: center;
}
.item{
    background-color: #c00;
}

flex 方式二：

利用父级的 display:flex 和 自己的 margin:auto 实现垂直居中。可以不必知道子元素尺寸：

.box{
    width:800px;
    height:800px;
    border:2px solid #c00;
    display:flex;
}
.item{
    margin:auto;
    background-color: #c00;
}

9.grid 方式：

grid 方式一：

利用父级的 justify-content 和 align-items 实现垂直居中布局。可以不必知道子元素尺寸：

.box{
    width:800px;
    height:800px;
    border:2px solid #c00;
    display:grid;
    justify-content: center;
    align-items: center;
}
.item{
    background-color: #c00;
}

grid 方式二：

利用父级的 display:grid 和 自己的 margin:auto 实现垂直居中。可以不必知道子元素尺寸：

.box{
    width:800px;
    height:800px;
    border:2px solid #c00;
    display:grid;
}
.item{
    margin:auto;
    background-color: #c00;
}