文本需要在准确的中心水平和垂直[重复]

Posted 2023-03-05

【中文标题】文本需要在准确的中心水平和垂直[重复]

【英文标题】：Text needs in exact center Horizontally and vertically [duplicate]

【发布时间】：2014-08-22 23:50:24

【问题描述】：

我需要创建类似的东西：文本应该在水平和垂直的中间位置。我已经实现了水平，但在垂直方面有问题。因为，我的文字是动态的。有时是两行文本，有时是四行，有时是只有一行。

这是我的 CSS 代码：

.image-container  border:1px solid #CCC; height:300px; width:300px; position:relative; float:left; margin-left:20px; 
p position:absolute; top:40%; text-align:center; width:100%; 

这是一个html：

 <div class="image-container">
<p> One line Content works perfact</p>
 </div>
 <div class="image-container">
<p> Two line Content:Lorem Ipsum is simply dummy text of the printing </p>
 </div>
 <div class="image-container">
<p> Three Line Content:Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
 </div>

请找到小提琴链接：http://jsfiddle.net/YK7V5/

【参考方案1】：

嘿，在你的小提琴中测试了这个，它可以工作:)

.image-container  border:1px solid #CCC; height:300px; width:300px; position:relative; float:left; margin-left:20px; 
    p text-align:center; display: table-cell; vertical-align: middle; height: 300px; width: 300px;

希望它对你有用:)

【参考方案2】：

我建议使用display:table 和display:table-cell 技术：

css

.image-container
  display:table;
  border:1px solid #CCC; 
  height:300px; 
  width:300px; 
  position:relative;
  float:left;
  margin-left:20px;
 
p 
 display:table-cell;
 text-align:center;
 width:100%;
 vertical-align: middle;

fiddle

也请看这里：

6 Methods For Vertical Centering With CSS