css垂直居中的问题_Html5_论坛

css垂直居中的问题

雨***梦分类：Html5 人气：1613 回帖：12 发布于6年前收藏

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

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

尽量不用js

标签：css html html5

Lv6 码匠

24***23 软件测试工程师 6年前#1

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

html, body {
    display: -webkit-flex;
    display: flex;
    width: 100%;
    height: 100%;
}
p {
    margin: auto;
}

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

Lv4 码徒

阁***起其它 6年前#2

<p><center >垂直居中</center></p>

文明上网，理性发言！ 😉 阿里云幸运券，戳我领取