css居中、垂直居中、水平居中

最新推荐文章于 2025-04-30 15:08:42 发布

mylisty

最新推荐文章于 2025-04-30 15:08:42 发布

阅读量116

点赞数

CC 4.0 BY-SA版权

文章标签： div水平居中 div居中 div垂直居中

本文链接：https://blog.youkuaiyun.com/mylisty/article/details/98728673

本文探讨了网页设计中常见的元素居中布局方法，包括使用CSS的flexbox、margin属性及绝对定位等，旨在帮助前端开发者掌握不同场景下的居中布局实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!--  居中显示-->
  <div>
  <div style="display: table-cell;vertical-align: center;text-align: center;
  width: 200px;height: 300px;background-color: #ff7900;line-height: 300px ">
      <div>
          <button>
             1
          </button>
          <span>
             2
          </span>
      </div>
  </div>
  <!-- 水平居中显示 可改动justify-content 调整一些内部元素的显示位置-->
  <div style="display: flex;justify-content: center;">
      <span>1</span>
      <span>2</span>
  </div>
      <!-- 水平居中   margin: 0 auto ;   垂直居中显示 margin:  auto  0; -->
     <div>
         <div style=" text-align: center;
      background-color: deepskyblue;
      border-radius: 20px;
      width: 100px;
      height: 100px;
      margin: 0 auto ;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;">
             1
         </div>
     </div>
  </div>