gigipop 2014-05-30
css的居中问题有好几种,第一种是水平居中,其实现代码如下:
<!DOCTYPE html> <html> <head> <title>xxx</title> <style type="text/css"> .parent { width: 400px; height: 400px; background-color: red; text-align: center; } .child { width: 200px; height: 200px; background-color: blue; margin: 0 auto; } </style> </head> <body> <div class="parent"> <div class="child"></div> </div> </body> </html>
第二种是垂直居中,其实现代码如下:
<!DOCTYPE html> <html> <head> <title>xxx</title> <style type="text/css"> .parent { width: 400px; height: 400px; background-color: red; position: relative; } .child { background-color: blue; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width: 200px; height: 200px; } </style> </head> <body> <div class="parent"> <div class="child"></div> </div> </body> </html>
第三种是图片文字垂直居中,其实现代码如下:
<!DOCTYPE html> <html> <head> <title>xxx</title> <style type="text/css"> .parent { width: 400px; height: 400px; background-color: red; position: relative; } .child { background-color: blue; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width: 200px; height: 200px; } img { width: 100px; height: 100px; vertical-align: middle; } </style> </head> <body> <div class="parent"> <div class="child"><img src="Koala.jpg" />character</div> </div> </body> </html>
/*垂直居中,div上边界距离窗口上边的距离为窗口高度的50%,并针对不同浏览器进行兼容。-- 在外层添加一个div,把行内容居中,添加.row .justify-content-center -->
CSS中居中的几种方式1.水平居中margin:0 auto;块级元素在块级元素中居中设置在子元素上,前提是不受float影响。给它的父元素设置text-aglin:center不会使它在父元素中居中