一些关于居中的小总结

鉴于我的记性只有七秒，做页面的时候，居中总是遇到各种问题，所以将各类居中并适用于什么情况做了一个整理，方便以后查阅

首先说一下text-align:center与margin:0 auto;的区别：text-align是对块元素的文本、图片进行居中，margin是对块元素居中

1.垂直居中：vertical-align:middle;

自己试了一下，对于文本没办法完成,也有可能是方法不当

看了一下w3c，是这么说的：

该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。

只有关于图像是如何对齐的例子：

<p>
这是一幅<img border="0" src="1.jpg" style="vertical-align:text-bottom"/>位于段落中的图像。
</p>
<p>
这是一幅<img style="vertical-align:middle" border="0" src="1.jpg" />位于段落中的图像。
</p>

示例图：



2.水平居中：text-align:center;

应为块级元素（div、p、input、ul、h1等），行内元素下不起作用（a、span等），可通过display:block等方式将行内元素转化为块级元素

<p style ="text-align: center;"><img src="1.jpg"></p>
<p style ="text-align: center;">呦呦呦</p>

示例图：



3.关于我们经常用的margin：0 auto;

定块状元素（即宽度一定）：width: 200px;margin:0 auto;

不定块状元素（即宽度不定）:display:table;margin:0 auto;

<p style ="margin:0 auto;background-color:green;width:200px;">啊哈哈</p>

示例图：



4.关于垂直居中的：height:150px;line-height: 150px，一定要有高度，等于line-height（行间距）值即可居中

<p style ="height:150px;line-height: 150px;background-color:green;width:200px;">大龙虾</p>

示例图：



5.居中一个浮动元素一:

1）设定块元素的宽（必需）width:400px;、高，

2）为块元素设置：margin-left:50%;position:relative;left:-200px;

这里的left值应为块元素宽度的一半

设置margin-left:50%后，此浮动元素左边正好位于文档中间，设置块相对定位position:relative;,然后左移宽度的二分之一，即可实现元素居中

<div style="width:400px;margin-left:50%;position:relative;left:-200px;background-color:blue;">可乐啊</div>

居中一个浮动元素二:

<div style="width:200px;margin:0 auto;position:relative;background-color: #eee;">我的脸啊</div>

示例图：



6.块内元素上下左右都居中:

<div style="height:50px;width:150px;line-height: 50px;background-color:pink;text-align: center;">啊哈哈</div>

示例图：



7.块的上下左右都居中一：

<div style="height:80px;width:150px;line-height:80px;background-color:#eee;margin: 0 auto;">黑胡椒氨基酸</div>

示例图：



块的上下左右都居中二：

<div style="position: relative;width:400px;height:400px;background-color:pink;">
<div style="width:100px;height:100px;position: absolute;top:50%;margin-top:-50px;left:50%;margin-left:-50px;background-color:#fff;">哈哈哈了</div>
</div>

示例图：



8.块及内部上下左右都居中:

<div style="height:80px;width:150px;line-height:80px;background-color:#eee;text-align: center;margin: 0 auto;">黑胡椒氨基酸</div>

示例图：



以上是自己关于居中的一点小总结，有不对或不到位的地方欢迎指正，不喜勿喷，欢迎交流~~