html - css垂直居中的问题-PHP中文网问答

讲师中心微信公众号

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题人工智能 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架人工智能 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 AI 提示词

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机游戏

最近更新

html - css垂直居中的问题

黄舟 2017-04-17 11:01:25

[HTML讨论组]

1351

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

垂直居中

尽量不用js

黄舟

人生最曼妙的风景，竟是内心的淡定与从容！

全部回复(8)

黄舟2017-04-17 11:03:25 8楼

1、table-cell方法，ls有讲

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

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

赞 +0

添加回复

ringa_lee2017-04-17 11:03:25 7楼

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

赞 +0

添加回复

迷茫2017-04-17 11:03:25 6楼

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

赞 +0

添加回复

高洛峰2017-04-17 11:03:25 5楼

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

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

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

赞 +0

添加回复

PHP中文网2017-04-17 11:03:25 4楼

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

赞 +0

添加回复

迷茫2017-04-17 11:03:25 3楼

来个不一样的，去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>

赞 +0

添加回复