在dvi中只有多行文字。我想文字在这个div中垂直水平居中该如何设置

在dvi中只有多行文字。我想文字在这个div中垂直水平居中该如何设置。

高宽定值PX
高定值PX 宽度自适应

小燃 2017-05-27

源自：CSS网页布局基础 2-1 经典的行布局（1）

35

收起

2回答

Miss路 2017-06-28 10:49:15

目前你的字儿就是水平垂直都居中的，而且你在container里面设置宽高100%是无效的，因为百分比是相对于父元素的，所以这里你可以用固定的数值，加上一个边框就看的更清楚了，可以参考下面的代码：

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<style>

.container {

width: 400px;

height: 500px;

border: 1px solid red;

text-align: center;

vertical-align: middle;

display: table-cell;

}

</style>

</head>

<body>

<div class="container">

<p>这是页面内容</p>

</div>

</body>

</html>

祝学习愉快！

小于飞飞 2017-05-27 11:05:05

方法多种，如定位、设置计算好的 margin、padding 等，还可以使用前课程中使用的 vertical-align 。如下。

vertical-align: middle;
display:table-cell;

希望对你有帮助，祝学习愉快。如解决你的疑惑，欢迎采纳

秋渡 #1

老师，我想用您说的方法实现垂直水平居中，应该要怎么修改。 ------------------- <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> .container{ width: 100%; height: 100%; text-align: center; vertical-align: middle; display: table-cell; } p{ } </style> </head> <body> <div class="container"> <p>这是页面内容</p> </div> </body> </html>

2017-06-27 22:48:19

相似问题

为什么设置为行内块无法设置文字居中，必须要块级元素

请老师看看为什么导航条不能居中？

margin:0 auto;这样设置是指div水平垂直都居中吗

为什么垂直居中效果不能实现？

文本垂直居中的设置很不方便，除了设置行高还有其他方法吗？

登录后可查看更多问答，登录/注册

前端小白入门系列课程

参与学习人
提交作业 11218 份
解答问题 36713 个

从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！

本课精华内容

问答作业

为什么我的没有框

5 45

表格的问题

377 41

大家好,body前面有一个红色的小××，麻烦大家帮我看看

378 40

到底是cellspacing还是cellpacing?

0 35

课间活动的表格怎么实现，想了很久也想不出来

60 30

查看更多本课问答

请稍等 ...

意见反馈帮助中心 APP下载