让DIV标签中的p标签内容水平垂直居中

最新推荐文章于 2023-12-09 14:54:44 发布

原创最新推荐文章于 2023-12-09 14:54:44 发布 · 5.5k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#css

需求案例专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一种使HTML中DIV标签内的P标签在水平和垂直方向上居中的方法，通过设置CSS样式实现，兼容Firefox和IE浏览器。示例代码展示了具体的实现方式。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>让DIV标签中的P标签水平和垂直都居中</title>
<style type="text/css">
div {
  width:400px;
  height:300px;
  border:1px solid purple;
  background-color: black;
  overflow:hidden;
  position:relative;
  display:table-cell;
  text-align:center;
  vertical-align:middle;
}
p {
  color: white;
  border:1px solid purple;
  width:100%;
  }
* { margin:0; padding:0;}
</style>
</head>
<body>
 
<div>
<p>我是多行文本，我要水平和垂直都居中。</p>
<p>且要完全兼容ff和ie。我是多行文本，我要水平和垂直都居中。且要完全兼容ff和ie。</p>
</div>
 
</body>
</html>

效果如下：