【Html/Css】div中实现多行文本自动换行且垂直居中的例子（很实用）

最新推荐文章于 2023-08-22 17:24:57 发布

原创最新推荐文章于 2023-08-22 17:24:57 发布 · 1.6k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#html #css #前端

收录于

5.【css】同时被 2 个专栏收录

85 篇文章

订阅专栏

4.【html】

83 篇文章

订阅专栏

该代码示例展示了如何通过CSS的Flexbox布局将div内容在水平和垂直方向上居中对齐。通过设置display为flex，结合justify-content和align-items属性，可以轻松实现内联元素的居中展示。

<style>
  /* 设置div的高度和边框 */
  div {
    height: 100px;
    border: 3px solid green;
    width:150px;
  }

  /* 设置div为弹性容器，水平和垂直方向都居中对齐内容 */
  .center {
    display: flex;
    justify-content: center;
    align-items: center;
  }
</style>

<div class="center">
  <p>我是垂直居中的文本垂直居中的文本</p>
</div>