css垂直居中的问题

在不给p标签任何高度和宽度的前提下,如何使“垂直居中”这几个文字显示在屏幕的正中央?

<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title></title>
</head>
<body>
	<p>垂直居中</p>
</body>
</html>

尽量不用js

已邀请:

忍不住想来回答下。对于不固定宽高的元素要居中的方法:父类div设置text-align:center.该需要居中的元素设置display:inline-block

czxlylc

赞同来自: mercury74

1、table-cell方法,ls有讲

2、如果知道子元素高度的话,可以有另一种好点的办法。假设子元素高度是100px。可以把父元素设为position: relative;然后父元素和子元素中间加一层position: absolute; top: 50%的div;最后最里面的子元素position: relative; top: -50px;

3、如果不用担心浏览器兼容性的话,可以用CSS transform(但是IE6-8不支持)。类似方法二,但是不需要知道元素高度。子元素最后向上平移(translate) 50%即可。

z4qls

赞同来自: cc25937795

除了上述的方法,还可以试试flexbox布局模式(Chrome当前版本仍然需要添加前缀“-webkit-”)



<code class="lang-css">html, body {
display: -webkit-flex;
display: flex;
width: 100%;
height: 100%;
}
p {
margin: auto;
}
</code>


不过该规范最近才达到稳定,在主要的浏览器对新的版本有相当完整的支持,但有些浏览器对它的实现也许并不相同。

zzkzhou521

赞同来自: supergaryli

好像看见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>

richway

赞同来自: lisilzb

p{margin:0 auto;}

dddjg

赞同来自:

<!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>

brainr

赞同来自:

用CSS盒式模型。我没有尝试过,兼容性不好。

cgj1024

赞同来自:

table-cell,妥妥的

z4qls

赞同来自:

来个不一样的,去360面试的时候没答出来,被鄙视了,现在写个正确的



<code><!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>
</code>

njmarked

赞同来自:

垂直居中

ziyiyeqing

赞同来自:

我是来学习的

要回复问题请先登录注册