在不给p标签任何高度和宽度的前提下,如何使“垂直居中”这几个文字显示在屏幕的正中央?
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <p>垂直居中</p> </body> </html>
尽量不用js
<!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> <div id="floater"> </div> <p>垂直居中</p> </body> </html>
好像看见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>
来个不一样的,去360面试的时候没答出来,被鄙视了,现在写个正确的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<style>
div {width:200px;height: 200px;background-color: red; position: absolute;left: 0;top: 0;right:0 ;bottom: 0;margin: auto;}
</style>
<body>
<div></div>
</body>
</html>
HTML:
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="c"> <p>垂直居中</p> </div> </body> </html>
CSS:
#c { display:table; height:400px; } #c p { display: table-cell; vertical-align: middle; }
http://jsfiddle.net/dGyuC/2/
不用js的话我只能想到这个了。