单Div黑科技：实现固定宽高下的文本水平垂直居中与超出省略

在网页设计和开发中，实现文本的水平垂直居中以及超出容器部分的省略是一个常见的需求。通常，这需要使用额外的HTML元素和CSS样式来实现，但今天我要介绍一种“单Div黑科技”，只需一个Div标签，就能实现这一效果。

水平垂直居中

要在一个固定宽高的Div中实现文本的水平垂直居中，我们可以使用CSS的flex布局。flex布局提供了一种非常简洁和强大的方式来对齐和分布容器内的元素。

css.center-div { display: flex; justify-content: center; align-items: center; width: 200px; height: 200px; border: 1px solid #000;}

在这个例子中，.center-div是一个固定宽高（200px x 200px）的容器。通过设置display属性为flex，我们可以启用flex布局。然后，使用justify-content: center和align-items: center属性，我们可以轻松地将文本水平垂直居中。

超出省略

接下来，我们来实现文本超出容器部分的省略效果。这可以通过CSS的text-overflow属性来实现。

css.center-div { display: flex; justify-content: center; align-items: center; width: 200px; height: 200px; border: 1px solid #000; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}

在这个例子中，我们添加了三个属性：overflow: hidden，white-space: nowrap和text-overflow: ellipsis。overflow: hidden属性用于隐藏超出容器的内容，white-space: nowrap属性用于防止文本换行，而text-overflow: ellipsis属性则会在文本超出容器时显示省略号（…）。

结合使用

现在，我们可以将这两个效果结合起来，实现一个既水平垂直居中又能在超出容器时显示省略号的Div。

css.center-div { display: flex; justify-content: center; align-items: center; width: 200px; height: 200px; border: 1px solid #000; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}

只需一个Div标签，我们就能实现这一效果。

1
2
3

<div class="center-div">这是一段很长的文本，超出部分会显示省略号。</div>

结论

通过使用CSS的flex布局和text-overflow属性，我们可以在一个固定宽高的Div中实现文本的水平垂直居中以及超出容器部分的省略。这种方法不仅简洁高效，而且易于维护和扩展。