入门前端，首先接触到的技术就是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>
css代码：
margin:0;
padding:0;
.main{
left:50%;
top: 50%;
margin-top: 50px; //上左边距均设置元素尺寸一半
margin-left: 50px;
margin: auto;
width: 100px;
height:100px;
当然这里还有种便捷写法，减少代码量。根据calc()函数的特点，可以计算属性值表达式，代替marin-top，margin-left
.main{
left: calc(50% - 50px);
top: calc(50% - 50px);//上左边距均设置元素尺寸一半
width: 100px;
height:100px;
浏览器中渲染结果：perfect,完美实现居中
上面所说的方法，虽然能实现居中，但美中不足。需要设置元素的具体尺寸，才能实现。
方案二，内容自适应元素居中
这种方案任然基于定位，不需要设置元素尺寸，同样实现居中。
原理：这里为元素设置了决定对位，同事上边距，左边距均50%，这样的设置结果，直接导致元素main左上角相对于视口正中心放置。然后通过transfrom：translate(-50%,50%);上左边距均移动到自身尺寸的一半位置处，元素居中。
具体代码：
