1、快标签自身水平居中:
当一个有宽度的块标签设置margin:0 auto时将实现自身的水平居中,示例脚本如下
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>float</title> <style type="text/css"> #container { margin: 0 auto; width: 90%; background: lightblue; height: 200px; } </style> </head> <body> <div id="container"> </div> </body> </html>
运行结果:
2、快标签内对其
text-align:start | end | left | right | center | justify | match-parent | justify-all
默认值:start
适用于:块标签
left: 内容左对齐。
center: 内容居中对齐。
right: 内容右对齐。
justify: 内容两端对齐,但对于强制打断的行(被打断的这一行)及最后一行(包括仅有一行文本的情况,因为它既是第一行也是最后一行)不做处理。(CSS3)
start: 内容对齐开始边界。(CSS3)
end: 内容对齐结束边界。(CSS3)
match-parent: 这个值和 inherit 表现一致,只是该值继承的 start 或 end 关键字是针对父母的 <' direction '> 值并计算的,计算值可以是 left 和 right 。(CSS3)
justify-all: 效果等同于 justify,但还会让最后一行也两端对齐。(CSS3)
示例代码:
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>float</title> <style type="text/css"> #container { margin: 0 auto; width: 90%; background: lightblue; height: 200px; text-align: center; } #div1{ width: 100px; height: 100px; background: lightgreen; } </style> </head> <body> <div id="container"> <div id="div1">div1</div> Hello Center </div> </body> </html>
运行结果:
这种对齐方式只针对块标签内的行内标签(inline box)与行内块标签(inline block)有效,对块标签是无效的因为块标签默认总是占整行。如果将示例中div1的显示方式修改为行内块标签(display: inline-block;),则效果如下所示:
3、垂直居中方法一
当一个设置了定位的元素所有的偏移为0且margin为auto时将水平,垂直都居中,且父元素自身的高度可动态变化。
示例代码:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } html,body{ height: 100%; } #div0{ width: 80%; height: 90%; border: 2px solid orange; margin: 0 auto; position: relative;/*如果父元素不设置定位,则是相对body居中*/ } #div1{ width: 200px; height: 150px; background: greenyellow; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; } </style> </head> <body> <div id="div0"> <div id="div1"></div> </div> </body> </html>
运行结果:
4、垂直居中方法二
如果是单行文本,行高如块的高度一样时将居中,只一行,行高和元素一样高,居中。
line-height: 120px;
height: 120px;
注:只可以是文字等一些行内标签,图片不行
示例代码:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #div1{ height: 100px; background: yellow; /*text-align: center;*/ line-height: 100px; } </style> </head> <body> <div id="div1"> 只可以是文字等一些行内标签,图片不行 </div> </body> </html>
运行结果:
把line-height:100px 换成是font:20px/100px "microsoft yahei" 也是一样的效果(20表示字体大小,100表示行高)
5、垂直居中方法三
让元素相对父元素定位,偏移左50%,上50%,把自身向左移半个宽度,向上移半个高度,同时完成了水平与垂直方向的居中
(个人理解的是,让元素相对父元素定位,偏移左50%,上50%后,只是元素的左顶点居中了,把自身向左移半个宽度,向上移半个高度后,则是考虑了自身高度和宽度的影响)
示例代码:
首先只是让元素相对父元素定位,偏移左50%,上50%:
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #div1{ width: 80%; height: 600px; position: relative; background: yellow; margin: 0 auto; } #div2{ width:300px; height: 200px; position: absolute; background: lawngreen; left: 50%; top: 50%; } </style> </head> <body> <div id="div1"> <div id="div2"></div> </div> </body> </html>
运行结果:
把自身向左移半个宽度,向上移半个高度后:即加上下面两句代码:
margin-left: -150px;
margin-top: -100px;
运行结果:
6、垂直居中方法四
在CSS有一个属性应该欺骗过很多开发者,一直认为使用了他就可以垂直居中了,但不行,这个属性就是:
语法:vertical-align:baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length>
默认值:baseline
作用:设置或检索内联元素在行框内的垂直对其方式
适用于:内联级与 table-cell 元素
baseline: 把当前盒的基线与父级盒的基线对齐。如果该盒没有基线,就将底部外边距的边界和父级的基线对齐
sub: 把当前盒的基线降低到合适的位置作为父级盒的下标(该值不影响该元素文本的字体大小)
super: 把当前盒的基线提升到合适的位置作为父级盒的上标(该值不影响该元素文本的字体大小)
text-top: 把当前盒的top和父级的内容区的top对齐
text-bottom: 把当前盒的bottom和父级的内容区的bottom对齐
middle: 把当前盒的垂直中心和父级盒的基线加上父级的半x-height对齐
top: 把当前盒的top与行盒的top对齐
bottom: 把当前盒的bottom与行盒的bottom对齐
<percentage>: 把当前盒提升(正值)或者降低(负值)这个距离,百分比相对line-height计算。当值为0%时等同于baseline。
<length>: 把当前盒提升(正值)或者降低(负值)这个距离。当值为0时等同于baseline。(CSS2) 说明:
设置或检索内联元素在行框内的垂直对其方式。
对应的脚本特性为verticalAlign。
不能实现对齐的主要原因是:vertical-align这个属性的特点,它是相对兄弟级行高(line-height)来定位
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #div1{ width: 60%; height: 500px; background: lawngreen; position: relative; margin: 0 auto; text-align: center; } #img1{ width:150px; height: 150px; vertical-align: middle; } span{ line-height: 500px; } </style> </head> <body> <div id="div1"> <img src="img/bgc.jpg" id="img1" /><span>span1</span> </div> </body> </html>
运行结果:
7、使用表格特性居中
示例代码:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #div0{ width: 60%; height: 500px; background: lawngreen; margin: 0 auto; display: table;/*类似让div0为一个table*/ } #div1{ display: table-cell;/*类似table中的td*/ vertical-align: middle;/*垂直居中*/ text-align: center; } </style> </head> <body> <div id="div0"> <div id="div1"> <img src="img/bgc.jpg" id="img1" /> </div> </div> </body> </html>
运行结果:
test:使用div构造一个表格:
示例代码:
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .dtable{ display: table; width: 50%; margin: 0 auto; } .dtr{ display: table-row; } .dtd{ display: table-cell; border: 1px solid gray; text-align: center; } </style> </head> <body> <div class="dtable"> <div class="dtr"> <div class="dtd">td11</div> <div class="dtd">td12</div> </div> <div class="dtr"> <div class="dtd">td21</div> <div class="dtd">td22</div> </div> </div> </body> </html>
运行结果:
8、垂直居中方法六
在某些时候需要将小图片与文字对齐,可以使用对齐的属性absmiddle(绝对居中),示例如下:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .div1{ border: 1px solid lawngreen; } </style> </head> <body> <div class="div1"> <img src="img/bla.png" align="absmiddle"/>和谐的美景 </div> </body> </html>
运行结果:
在IE8中浏览效果一样
9、垂直居中方法七
方法与4.5非常类似,但是4.5要求知道居中元素自身的高度与宽度,这样会有一定的局限,CSS3中可以使用transform移动元素自身的宽度与高度,示例代码如下:
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> /*.dtable{ display: table; width: 50%; margin: 0 auto; } .dtr{ display: table-row; } .dtd{ display: table-cell; border: 1px solid gray; text-align: center; }*/ html,body{ margin: 0; padding: 0; height: 100%; } .div1{ width: 80%; height: 70%; background: lawngreen; margin: 0 auto; position: relative; } #img1{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } </style> </head> <body> <!--<div class="dtable"> <div class="dtr"> <div class="dtd">td11</div> <div class="dtd">td12</div> </div> <div class="dtr"> <div class="dtd">td21</div> <div class="dtd">td22</div> </div> </div>--> <div class="div1"> <img src="img/bla.png" id="img1"/> </div> </body> </html>
运行结果:
transform用于设置或检索对象的转换,参数translate()指定对象的2D translation(2D平移)。第一个参数对应X轴,第二个参数对应Y轴。如果第二个参数未提供,则默认值为0