div居中以及div中的元素居中-优快云博客

div水平和垂直居中，text-align和vertical-align不起作用，因为标签div没有这两个属性，所以再css中设置这两个值不能居中的效果。

1. div水平居中:设置margin的左右边距为自动。

1 div
2 {
3      margin:0 auto;
4 }

2. div中的元素居中

2.1 div中的文字居中：将div的行高设置跟其高度一样的值。

1 div
2 {
3     height:200px;
4     line-height:200px;
5 }

2.2 div中的图片居中,方法一：将div的行高设置跟其高度一样的值，将其中的图片img外套上标签i,设置i和div同时垂直居中

 1 div
 2 {
 3     width: 200px;
 4     height: 200px;
 5     line-height: 200px;
 6     vertical-align: middle;
 7     background-color: Gray;
 8 }
 9 div i
10 {
11     vertical-align: middle;
12 }

2.3 div中的图片居中,方法二：将div转换成tablecell,让后设置vertical-align属性居中。

1 div
2 {
3     width: 200px;
4     height: 200px;
5     display: table-cell;
6     vertical-align: middle;
7     background-color: Gray;
8 }

程序员的基础教程：菜鸟程序员

转载于:https://www.cnblogs.com/guohu/archive/2012/09/17/2689893.html