垂直居中的4种方法(笔记整理)

垂直居中的4种方法

一、对于宽高固定的div

方法1：定位 50% margin 负距

代码如下(一下代码都是在style中)：

		.box{
			width: 200px;
			height: 100px;
			position: absolute;
			left: 50%;
			top: 50%;
			margin-top: -50px;
			margin-left: -100px;
		}

tips：调整中心点： 一开始div的中心点在左上角 要想垂直居中，就要调整到div的中心 即一半宽度一半高度的位置上。

方法2: 定位 四方位为0 margin:auto (最简单的一种方式)

代码如下(一下代码都是在style中)：

		.box{
			width: 200px;
			height: 100px;
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			margin: auto;
		}

tips：用定位 来定义四个方位 将盒子拉扯开 对四个方向都能做出调整 然后margin:auto 对页面自适应达到垂直居中效果

二、对于宽高不固定的div

方法3: 定位 利用css3中的transform属性

		.box{
			position: absolute;
			width: 300px;
			height:200px;
			background-color: deeppink;
			transform: translateX(-50%) translateY(-50%);
			left: 50%;
			top: 50%;
		}

tips：运用了css3的transform属性进行了X轴 Y轴的移动 再用定位的left top来调整 这种方法不论div宽高怎么改变 都是垂直居中的。

三、flex布局

方法4: 利用css3中的flex布局

		.box{
			/* 开启flex 布局   替换了左浮动 垂直居中*/
			display: flex;
			
			/* 容器属性 横向对齐*/
			justify-content: space-between;
			
			/* 定义垂直方向的居中 */
			align-items: center;
		}

tips: 运用了css3种的flex布局 flex在pc端 移动端 响应式页面都是非常好用 常见的一种布局方式，但是要注意的是：设为flex布局后，子元素的float、clear、vertical-align属性将失效。

Flex布局详情请看（菜鸟教程flex布局语法解释）：https://www.runoob.com/w3cnote/flex-grammar.html

============================================================================

希望能帮助到你们，对我也是一个总结温习的过程0.0 hahaha~