css-页面布局(居中对齐详解)

入门前端，首先接触到的技术就是html，css。首先说css布局这块，逻辑性的东西不多，或者根本就没有。难的是如何熟练运用css + html设置出漂亮的页面布局尤为重要。而如何实现一个div在页面中居中对齐，又是一个难啃指点。下面结合实例分享一些css技巧。

居中布局

大家都知道居中布局分两种，水平居中布局和垂直居中布局。这两种技术在目前的web开发中很常见，时不时都会碰到。话说回来，水平居中布局大家都知道，但垂直居中对齐呢，难了吧。推荐如下几种垂直居中解决方案。

基于绝对定位解决方案

方案一：

具体操作：为需要居中元素设置绝对定位 同时设置left,top : 50%，然后通过margin-top：0.5 * width,margin-bottom: 0.5 * height; 实列如下：
如下结构元素，水平垂直居中布局
html代码：

```
	<div class="main">
		<h1>hello</h1>
		<p>hello! want to be power man</p>
	</div>
```

css代码：

	*{
		margin:0;
		padding:0;
	}
	.main{
		position:absolute;
		left:50%;	
		top: 50%;
		margin-top: 50px;	//上左边距均设置元素尺寸一半
		margin-left: 50px;
		margin: auto;
		width: 100px;
		height:100px;
	}

	当然这里还有种便捷写法，减少代码量。根据calc()函数的特点，可以计算属性值表达式，代替marin-top，margin-left
	.main{
		position:absolute;
		left: calc(50% - 50px);	
		top: calc(50% - 50px);//上左边距均设置元素尺寸一半
		width: 100px;
		height:100px;
	}

浏览器中渲染结果：perfect,完美实现居中

上面所说的方法，虽然能实现居中，但美中不足。需要设置元素的具体尺寸，才能实现。

方案二，内容自适应元素居中

这种方案任然基于定位，不需要设置元素尺寸，同样实现居中。

原理：这里为元素设置了决定对位，同事上边距，左边距均50%，这样的设置结果，直接导致元素main左上角相对于视口正中心放置。然后通过transfrom：translate(-50%,50%);上左边距均移动到自身尺寸的一半位置处，元素居中。

具体代码：

	.main{
		position: absolute;
		left: 50%;	
		top: 50%;
		transfrom: translate: (-50%, -50%);	
	}

总结：
以上布局缺点确实能实现居中，并且还能不需要元素具体尺寸。但缺点也相继暴露出。利用了绝对定位，能完成效果，但是他是页面布局更加混乱，或者简直是火上浇油。杀敌一千，自损八百那种。

基于视口的解决方案

这里先普及一下：
1vw，1vh均为视口相关的单位。
1vw: 和视口的宽度相关。表示视口宽度的 1%（vw,vh —> v-width,v-height类似这样的解释）
1vh: 同理，是和高度相关的。表示视口高度的 1%

1vmin,1vmax：

当 view-width <view-height, 1vmin = 1vw, 否则，= 1vh
当 view-width > view-height, 1vmax = 1vh, 否则，= 1vh

他们实现布局的方案：

.main{
	width:50px;
	height:50px;
	margin:50vh auto 0;	//相对于视口高度的50%的上外边距
	transfrom: translateY(-50%);
}

这种布局方案使用场景不多，只适用相对视口进行居中的的场景，仅仅作为了解。

基于Flexbox方案;

利用flex弹性盒子垂直居中布局，为容器元素设置display：flex属性,同时还需要为居中元素设置margin:auto.

在body内的唯一子元素，居中解决如下；

body{
	display: flex;
	min-height:  100vh;	//必须否则不会出现垂直居中
	margin:0;	//必须，否者会出现撑出滚动条
}
.main{
	margin:auto;	//这里的auto,同时实现水平垂直居中
}

//其他场景
//容器元素
element-container{
	display:flex;
}
//需要居中元素
element-kid{
	margin:auto
}

总的来说，除了基于视口的垂直居中外，其他的解决方案，平常的开发中基本都会用到。基于flex的弹性布局方案，这里得提醒一下，弹性布局不仅仅是用来实现垂直居中，在其他网页整体排版，布局都会用到，可以说，使用这个布局解决方案，是尤为明智的选择。当然万物都不可十全十美，因为使用了css三的相关属性缘故，所以兼容性这块需要做处理。但是目前主流浏览器，chrome,safri,欧朋，Firefox已经得到良好支持，不要过度担心。

才疏学浅，内容解释不足之处，万望指正！