fieldset/legend与文字两侧边框实现演示页面

展示

代码

• HTML：

  <h4>边框灰色</h4>
  <fieldset>
      <legend>标题</legend>
  </fieldset>
  
  <h4>文字居中</h4>
  <fieldset class="center">
      <legend>标题</legend>
  </fieldset>
  
  <h4>虚线分隔线</h4>
  <fieldset class="center hr">
      <legend>分隔线</legend>
  </fieldset>

• CSS：

  fieldset {
      border: 1px solid #ccc;
  }
  
  .center legend {
      margin-inline: auto;
  }
  
  .hr {
      border: none;
      border-top: 1px dashed #ccc;
  }
  .hr legend {
      margin-inline: auto;
  }