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

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

方案一：

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

hello! want to be power man

css代码：

浏览器中渲染结果：perfect,完美实现居中 上面所说的方法，虽然能实现居中，但美中不足。需要设置元素的具体尺寸，才能实现。

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

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

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

具体代码：

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

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

1vmin,1vmax：

当 view-width view-height, 1vmax = 1vh, 否则，= 1vh

他们实现布局的方案：

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

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

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

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

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