垂直居中

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

利用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.关注后，手机客户端点击我的主页面，右上角有私信，请私信回复：【学习】

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