css居中大全集

最新推荐文章于 2024-04-02 05:57:28 发布

webRambler

最新推荐文章于 2024-04-02 05:57:28 发布

阅读量127

点赞数

分类专栏： css总结前端文章标签： html5 css3

本文链接：https://blog.csdn.net/weixin_40920953/article/details/110044791

版权

前端同时被 2 个专栏收录

102 篇文章 2 订阅

订阅专栏

css总结

2 篇文章 0 订阅

订阅专栏

本文介绍了如何利用flex布局、定位和transform属性在实际开发中实现子元素的水平垂直居中，包括了三种方法：flex布局控制、绝对定位配合margin以及transform的translate应用实例。

摘要由CSDN通过智能技术生成

我的最新博客地址：我的最新博客

1.父盒子使用flex布局控制子盒子水平垂直居中

2.需要居中的盒子自身使用定位配合margin

3.定位结合transform的translate属性

在实际开发过程中，我们会碰到很多需要用到水平垂直居中的场景，为了方便大家的开发，特此做下总结和记录。话不多说，进入正题（温馨提示：以下所说的居中是相对于父盒子而言）。

1.父盒子使用flex布局控制子盒子水平垂直居中

例如：

html部分：

    <div class="parent">
        <div class="son"></div>
    </div>

css部分：

      .parent {
          height: 300px;
          width: 300px;
          background-color: deepskyblue;
          display: flex;
          justify-content: center;
          align-items: center;
      }
      .son {
          width: 100px;
          height: 100px;
          background-color: hotpink;
      }

效果如下：

2.需要居中的盒子自身使用定位配合margin

html部分：

    <div class="center"></div>

css部分：

      .center {
          background-color: deepskyblue;
          width: 100px;
          height: 100px;
          position: absolute;
          top: 0;
          right: 0;
          bottom: 0;
          left: 0;
          margin: auto;
      }

值得注意的是，这里的margin：auto；并不能省略，切记！！！

3.定位结合transform的translate属性

      .center {
          background-color: deepskyblue;
          width: 100px;
          height: 100px;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
      }