篇文章主要给大家介绍一下如何使用html+css实现元素的水平与垂直居中效果，这也是我们网页在编码制作中会经常用到的问题。

1）单行文本的居中

主要实现css代码：

水平居中：text-align:center;

垂直居中：line-height:XXpx; /*line-height与元素的height的值一致*/

我们先来看这样一个例子，加入我们这里有一个div，宽度和高度为300px，背景颜色为黑色，然后在div中有一行简短文字，我们只需要使用line-height:200px;就可以实现文字的居中效果，具体的代码如下所示：

由上图可以看出我们实现了单行文字的垂直居中效果，但是很多时候我们的文字并不知道具体有多少，可能有一行，也可能有很多行，那么遇到多行文字的这种问题我们要如何处理呢。

2）多行文本的垂直居中

对于多行文本的垂直居中我们有很多种实现方式，我们这里逐个的来看一下；

1、使用display:table来实现

主要实现代码：

display: table使块状元素成为一个块级表格;

display: table-cell;子元素设置成表格单元格;

vertical-align: middle;使表格内容居中显示，即可实现垂直居中的效果;

具体的html与css的代码就如下所示：

2、使用absolute与transform配合实现

主要实现代码：

position:absolute; 首先给文本绝对定位；

left:50%;top:50%;transform:translate(-50%,-50%); 让文本距离盒子左边和上边分别为50%，再用transform向左（上）平移它自己宽度（高度）的50%，也就达到居中效果了。

具体的html与css的代码就如下所示：

3、使用flex实现

主要实现代码：

display: flex;设置 display 属性的值为 flex 将其定义为弹性容器

align-items: center;定义项目在交叉轴（纵轴）上如何对齐，垂直对齐居中

justify-content: center; 定义了项目在主轴上的对齐方式，水平对齐居中

具体的html与css的代码就如下所示：

好了，本篇文章就给大家说到这里，大家自己动手写一下看能不能写出一样的页面效果出来，也可以找一些类似的页面自己练习一下，有需要源码的可以直接私信【网站源码】即可。

每日金句：了解别人心里想什么，你才能得到自己想要的。喜欢我的文章的小伙伴记得关注一下哦，每天将为你更新最新知识。

直居中

通用布局方式(内敛元素和块状元素都适用)

利用flex:

核心代码:

.container{
 display:flex;
 flex-direction:column;
 justify:center
}

利用transformX(-50%):

核心代码:

.container{
 width: 300px;
 height: 300px;
 background: red;
 position:relative;
 	}
.child{
 position: absolute;
 top: 50%;
 transform: translateY(-50%);
 -webkit-transform: translateY(-50%);
 			}

内敛元素的垂直居中

单行内敛元素:设置内敛元素的高度和行高相等

核心代码:

.container {
 height: 120px;
 line-height: 120px;
}

块状元素

固定元素高度的块状元素

核心代码

.container{
 position: relative;
}
.child{
 position: absolute;
 top: 50%;
 height: 100px;
 margin-top: -50px; 
}

未知高度的块状元素

当垂直居中的元素的高度和宽度未知时，我们可以借助CSS3中的transform属性向Y轴反向偏移50%的方法实现垂直居中。但是部分浏览器存在兼容性的问题。

核心代码:

.container {
 position: relative;
}
.child {
 position: absolute;
 top: 50%;
 transform: translateY(-50%);
}

水平居中

通用布局方式

flex布局

核心代码：

.container{
display: flex; 
 justify-content: center;
}
absoulte+transform

核心代码:

.container{
position:relative;
}
.child{
 position: absolute;
 left: 50%;
 transform: translateX(-50%);
}

内敛元素水平居中

text-align:center

核心代码:

.container{
text-align:center
}

块状元素水平居中

使用 margin:0 auto 必须注明子元素和父元素的宽度

核心代码:

.container{
margin:0 auto
}

多块状元素：

利用内敛元素布局方式container属性为text-align:center;

核心代码:

.container{
text-align: center;
}
.child{
display: inline-block;
}

水平垂直居中

固定宽高元素水平垂直居中

通过margin平移元素整体宽度的一半，使元素水平垂直居中。

核心代码:

.container {
 position: relative;
}
.child {
 width: 300px;
 height: 100px;
 padding: 20px;
 position: absolute;
 top: 50%;
 left: 50%;
 margin: -70px 0 0 -170px;
}
 

未知宽高元素水平垂直居中

利用2D变换，在水平和垂直两个方向都向反向平移宽高的一半，从而使元素水平垂直居中。

核心代码：

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

利用flex布局

利用flex布局，其中justify-content 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式；而align-items属性定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。

核心代码：

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

相对于 body 的水平垂直居中

列表布局(兼容性好)

核心代码:

.outer {
 display: table;
 position: absolute;
 height: 100%;
 width: 100%;
}
.middle {
 display: table-cell;
 vertical-align: middle;
}
.inner {
 margin-left: auto;
 margin-right: auto; 
 width: 400px;
}

position 布局

核心代码

.container{
	position: absolute;
	margin: auto;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	}

我是一名前端开发程序员，自己整理了一份2019最全面前端学习资料，从最基础的HTML+CSS+JS到移动端HTML5到各种框架都有整理，送给每一位前端小伙伴，这里是小白聚集地，欢迎初学和进阶中的小伙伴

前端资料获取方式：

1.在你手机的右上角有【关注】选项，点击关注！

2.关注后，手机客户端点击我的主页面，右上角有私信，请私信回复：【学习】

电脑已经设置好了关键词自动回复，所以回复的时候请注意关键词哟~