html+css常见页面布局（一）

1.div元素居中
1.1居中的div元素宽高已定
效果图：

代码如下：

//css样式
.div1{
position:relative;
width:100px;
height:100px;
border:1px solid  black;
}
.div2{
background-color:yellow;
position:absolute;
width:60px;
height:50px;
top:50%;
left:50%;
margin-left:-30px;
margin-top:-25px;
}

tips:遇到宽高固定的元素居中问题都可以按照这样的样式来设计，父元素应用position:relative/absolute（主要是为了照顾子div中的position:absolute ps:absolute只能相对于除了static已经定位的最近父元素进行定位）；
子元素即本例中的div2定位采用absolute定位，设置四个关键属性：top：50%；left：50%；margin-left:-0.5width;margin-top:-0.5height.
关于这几个参数只要记住就好了，其中蕴含着可能小学四五年级的高深数学知识，有兴趣的可以去算算看。
另外只要将margin改为auto也可以实现上述效果。

.div2{
 background: yellow;
 width:60px;
height:50px;
margin:auto;
 top:0;
bottom:0;
left:0;
 right:0;
position: absolute; 
						}

tips:top;0; left:0; right;0; bottom:0;
会使得子元素充满容器（如果不指定子元素固定宽高）。固定宽高（父元素）=固定宽高（子元素）+margin（包括左右上下）而margin:auto会使得左右边距一致，从而实现了水平垂直居中。

1.2无论是否设置了子元素宽高，都能满足（flex布局，相关信息参考文章：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool）

效果如下：

ps上面的代码中，我将body设置了高度（body的默认属性是width为最大，而height为auto，虽内容的填充而增大，如不设置，则无法实现子元素的垂直居中），然后应用方法1.1的方法将div1居中，再应用flex布局将div2实现居中。
（flex属性也很值得细细的琢磨哦 ?）
1.3使用transform使子元素居中(可不指定宽高)

指定宽高效果：

不指定宽高向其中填充元素

		

			

			Hello World!Hello World!
			
		
	

效果图：

其他居中对齐方式参考文章
https://www.cnblogs.com/haoyijing/p/5815394.html
关于栅格化布局，多元素水平居中等常见布局详见文章
http://www.cnblogs.com/0603ljx/p/4440449.html