#HTML元素居中方法总结

前言：

通常我们将元素左右居中的方式是一项非常简单的任务：

当元素的属性为or-block时，即使变成(block)元素，也要使用text-align:左右居中。

如果元素的属性是block，设置-left和-right为auto，使元素左右居中。

但是，上下居中并不是那么容易。本文将总结上、下、左、右三种常用的居中方法。本文总结了来自的视频教程。

准备工作：

.background{
    background-image: url(./pic.png);
    background-repeat: no-repeat;
    background-size: 100vh;
    height: 100vh;
}
img{
    height:100px;

}
*{
    margin: 0;
    padding:0;
}

方法一：

第一：

img{
    position: absolute;
    top:50%;
    left:50%;
}

此时狗头的左上角会在屏幕中央。

所以我们要把狗头大小的50%往上和左移动，这样狗头的中心就可以放在屏幕的中心，我们使用属性方法：

img{
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
/* 等同于transform: translateX(-50%) translateY(-50%); */
}

方法二：弹性布局

这可能是最简单的方法，在容器中添加以下属性：

.background{
    display: flex;
    justify-content: center;/*水平轴*/
    align-items: center;/*垂直轴*/
}

方法3：表格

HTML 的 Table 元素有一个用于设置垂直对齐的属性。我们也可以通过CSS将其他元素的属性设置为table，以Table的形式显示。

首先，将 body 做成一个表格：

body{
    width: 100%;
    height: 100vh;
    display: table;
}
.background{
}
img{
}

然后，将狗的头部容器设置为单元格：

body{
    width: 100%;
    height: 100vh;
    display: table;

}
.background{
    display: table-cell;
}

此时：

然后，将狗头所在的单元格垂直居中：

body{
    width: 100%;
    height: 100vh;
    display: table;
}
.background{
    display: table-cell;
    vertical-align: middle;
}
img{

}

最后，将狗的头部水平居中。

body{
    width: 100%;
    height: 100vh;
    display: table;
}
.background{
    display: table-cell;
    vertical-align: middle;
    text-align: center;/*单元格是行内元素*/
}
img{
}

上面的过程，简单来说就是将body做成一个只有一个单元格的表格，然后将单元格垂直居中，最后将单元格内容水平居中。

注意：不要以为将body设置为table会影响其他元素。这只是一个例子。只要满足三级嵌套元素结构，就可以设置为：表格-单元格-要居中的元素。例如：div>div>div也是可以的。