84669 orang belajar
152542 orang belajar
20005 orang belajar
5487 orang belajar
7821 orang belajar
359900 orang belajar
3350 orang belajar
180660 orang belajar
48569 orang belajar
18603 orang belajar
40936 orang belajar
1549 orang belajar
1183 orang belajar
32909 orang belajar
在不给p标签任何高度和宽度的前提下,如何使“垂直居中”这几个文字显示在屏幕的正中央?
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <p>垂直居中</p> </body> </html>
尽量不用js
人生最曼妙的风景,竟是内心的淡定与从容!
Tivon的方案不错,改进一下:
https://gist.github.com/4326240
呃,有没有办法直接嵌入gist的?
HTML:
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <p id="c"> <p>垂直居中</p> </p> </body> </html>
CSS:
#c { display:table; height:400px; } #c p { display: table-cell; vertical-align: middle; }
http://jsfiddle.net/dGyuC/2/ 不用js的话我只能想到这个了。
1、table-cell方法,ls有讲
table-cell
2、如果知道子元素高度的话,可以有另一种好点的办法。假设子元素高度是100px。可以把父元素设为position: relative;然后父元素和子元素中间加一层position: absolute; top: 50%的p;最后最里面的子元素position: relative; top: -50px;
position: relative
position: absolute; top: 50%
position: relative; top: -50px;
3、如果不用担心浏览器兼容性的话,可以用CSS transform(但是IE6-8不支持)。类似方法二,但是不需要知道元素高度。子元素最后向上平移(translate) 50%即可。
<p><center >垂直居中</center></p>
好像看见kejun在微博上提过这种写法,用button标签,里面的内容默认就是水平垂直居中的,当然需要定义button样式。
<!doctype html> <html> <head> <meta charset="utf-8"> <title>使用button垂直水平居中</title> <style type="text/css"> html,body,button{width: 100%;height: 100%;margin: 0;padding: 0;} </style> </head> <body> <button><p>wording</p></button> </body> </html>
除了上述的方法,还可以试试flexbox布局模式(Chrome当前版本仍然需要添加前缀“-webkit-”)
html, body { display: -webkit-flex; display: flex; width: 100%; height: 100%; } p { margin: auto; }
不过该规范最近才达到稳定,在主要的浏览器对新的版本有相当完整的支持,但有些浏览器对它的实现也许并不相同。
看这里,通用方案。https://github.com/sofish/Alice/blob/...
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style> html, body { height:100%; padding:0; margin:0 } #floater { height:50%; margin-bottom:-150px; position:relative; } p { background:#933; height:300px; position:relative; } </style> </head> <body> <p id="floater"> </p> <p>垂直居中</p> </body> </html>
忍不住想来回答下。对于不固定宽高的元素要居中的方法:父类p设置text-align:center.该需要居中的元素设置display:inline-block
来个不一样的,去360面试的时候没答出来,被鄙视了,现在写个正确的
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> </head> <style> p {width:200px;height: 200px;background-color: red; position: absolute;left: 0;top: 0;right:0 ;bottom: 0;margin: auto;} </style> <body> <p></p> </body> </html>
Tivon的方案不错,改进一下:
https://gist.github.com/4326240
呃,有没有办法直接嵌入gist的?
HTML:
CSS:
http://jsfiddle.net/dGyuC/2/
不用js的话我只能想到这个了。
1、
table-cell
方法,ls有讲2、如果知道子元素高度的话,可以有另一种好点的办法。假设子元素高度是100px。可以把父元素设为
position: relative
;然后父元素和子元素中间加一层position: absolute; top: 50%
的p;最后最里面的子元素position: relative; top: -50px;
3、如果不用担心浏览器兼容性的话,可以用CSS transform(但是IE6-8不支持)。类似方法二,但是不需要知道元素高度。子元素最后向上平移(translate) 50%即可。
<p><center >垂直居中</center></p>
好像看见kejun在微博上提过这种写法,用button标签,里面的内容默认就是水平垂直居中的,当然需要定义button样式。
除了上述的方法,还可以试试flexbox布局模式(Chrome当前版本仍然需要添加前缀“-webkit-”)
不过该规范最近才达到稳定,在主要的浏览器对新的版本有相当完整的支持,但有些浏览器对它的实现也许并不相同。
看这里,通用方案。
https://github.com/sofish/Alice/blob/...
忍不住想来回答下。对于不固定宽高的元素要居中的方法:父类p设置text-align:center.该需要居中的元素设置display:inline-block
来个不一样的,去360面试的时候没答出来,被鄙视了,现在写个正确的