[css]div布局子元素相对父元素水平垂直居中的三种简单快速实现

最新推荐文章于 2023-04-03 16:21:54 发布

say个嗨呀

最新推荐文章于 2023-04-03 16:21:54 发布

阅读量1.1k

点赞数

文章标签： css html 前端

本文链接：https://blog.csdn.net/Geezer_007/article/details/129008327

版权

方法一：定位法

html结构：

css样式：

   .parent{
       width:500px;
       height:500px;
       background:#ccc;
       position: relative;
   }
   .children{
        width:300px;
       height:300px;
       background: red;
      position: absolute;
      top:0;
      bottom:0;
       left: 0;
       right:0;
       margin: auto;
   }

效果图：

方法二：table-cell方法

html结构：

css样式：

.parent{
       width:500px;
       height:500px;
       background:#ccc;
       display: table-cell;
       vertical-align: middle
   }
  .children{
       width:300px;
       height:300px;
       background: red;
       margin:auto;
   }

效果图：

方法三：弹性布局方法

html结构：

css样式：

.parent{
       width:500px;
       height:500px;
       background:#ccc;
       display: flex;
      justify-content: center;
   align-items: center;
   }
   .children{
       width:300px;
       height:300px;
       background: red;
   }

效果图：