CSS实现子元素div水平垂直居中的典型例子有哪些？

最新推荐文章于 2023-09-30 13:11:25 发布

网站云管家

最新推荐文章于 2023-09-30 13:11:25 发布

阅读量123

点赞数

分类专栏：子元素文章标签： css

本文链接：https://blog.csdn.net/m0_55486125/article/details/113947477

版权

子元素专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文详细介绍了CSS实现子元素div水平垂直居中的五种方法，包括定位与margin配合、flex布局、position与transform结合、负margin配合及display:table-cell。这些示例代码对CSS布局学习极具参考价值。

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

这篇文章主要介绍了CSS实现子元素div水平垂直居中的示例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

div基本布局

css样式

1. 配合定位与margin：auto

父元素加相对定位，子元素加绝对定位


  
  
    
    
     
     
    
    
    
    
     
     
      
      .main{
     
     
    
    

    
    
     
     
    
    
    
    
     
     
      
      width: 
      
      300px;
     
     
    
    

    
    
     
     
    
    
    
    
     
     
      
      height: 
      
      300px;
     
     
    
    

    
    
     
     
    
    
    
    
     
     
      
      background-color: red;
     
     
    
    

    
    
     
     
    
    
    
    
     
     
      
      position: relative;
     
     
    
    

    
    
     
     
    
    
    
    
     
     
      
      }
     
     
    
    

    
    
     
     
    
    
    
    
     
     
      
      .center{
     
     
    
    

    
    
     
     
    
    
    
    
     
     
      
      width: 
      
      100px;
     
     
    
    

    
    
     
     
    
    
    
    
     
     
      
      height: 
      
      100px;
     
     
    
    

    
    
     
     
    
    
    
    
     
     
      
      background-color: skyblue;
     
     
    
    

    
    
     
     
    
    
    
    
     
     
      
      position: absolute;
     
     
    
    

    
    
     
     
    
    
    
    
     
     
      
      left: 
      
      0;
     
     
    
    

    
    
     
     
    
    
    
    
     
     
      
      right: 
      
      0;
     
     
    
    

    
    
     
     
    
    
    
    
     
     
      
      top: 
      
      0;
     
     
    
    

    
    
     
     
    
    
    
    
     
     
      
      bottom: 
      
      0;
     
     
    
    

    
    
     
     
    
    
    
    
     
     
      
      margin: auto;
     
     
    
    

    
    
     
     
    
    
    
    
     
     
      
      }

2.利用flex布局，设置水平与竖直方向的内容居中。


  
  
    
    
     
     
    
    
    
    
     
     
      
      .main{
     
     
    
    

    
    
     
     
    
    
    
    
     
     
      
      width: 
      
      300px;
     
     
    
    

    
    
     
     
    
    
    
    
     
     
      
      height: 
      
      300px;
     
     
    
    

    
    
     
     
    
    
    
    
     
     
      
      background-color: red;
     
     
    
    

    
    
     
     
    
    
    
    
     
     
      
      display: flex;
     
     
    
    

    
    
     
     
    
    
    
    
     
     
      
      justify-content: center;
     
     
    
    

    
    
     
     
    
    
    
    
     
     
      
      align-items: center;
     
     
    
    

    
    
     
     
    
    
    
    
     
     
      
      }
     
     
    
    

    
    
     
     
    
    
    
    
     
     
      
      .center{
     
     
    
    

    
    
     
     
    
    
    
    
     
     
      
      width: 
      
      100px;
     
     
    
    

    
    
     
     
    
    
    
    
     
     
      
      height: 
      
      100px;
     
     
    
    

    
    
     
     
    
    
    
    
     
     
      
      background-color: greenyellow;
     
     
    
    

    
    
     
     
    
    
    
    
     
     
      
      }

3.利用position:absolute与transform

:这里需要记住的是transform中translate使用百分比时相对的是自己的长宽，不是父盒子的。


  
  
    
    
     
     
    
    
    
    
     
     
      
      .main{
     
     
    
    

    
    
     
     
    
    
    
    
     
     
      
      width: 
      
      300px;
     
     
    
    

    
    
     
     
    
    
    
    
     
     
      
      height: 
      
      300px;
     
     
    
    

    
    
     
     
    
    
    
    
     
     
      
      background-color: red;
     
     
    
    

    
    
     
     
    
    
    
    
     
     
      
      position: relative;
     
     
    
    

    
    
     
     
    
    
    
    
     
     
      
      }
     
     
    
    

    
    
     
     
    
    
    
    
     
     
      
      .center{
     
     
    
    

    
    
     
     
    
    
    
    
     
     
      
      width: 
      
      100px;
     
     
    
    

    
    
     
     
    
    
    
    
     
     
      
      height: 
      
      100px;
     
     
    
    

    
    
     
     
    
    
    
    
     
     
      
      background-color: pink;
     
     
    
    

    
    
     
     
    
    
    
    
     
     
      
      position: absolute;
     
     
    
    

    
    
     
     
    
    
    
    
     
     
      
      left: 
      
      50%;
     
     
    
    

    
    
     
     
    
    
    
    
     
     
      
      top: 
      
      50%;
     
     
    
    

    
    
     
     
    
    
    
    
     
     
      
      transform: 
      
      translateX(-
      
      50%) 
      
      translateY(-
      
      50%);
     
     
    
    

    
    
     
     
    
    
    
    
     
     
      
      }

4.定位与负margin配合

只适合子盒子长宽固定的情况


  
  
    
    
     
     
    
    
    
    
     
     
      
      .main{
     
     
    
    

    
    
     
     
    
    
    
    
     
     
      
      width: 
      
      300px;
     
     
    
    

    
    
     
     
    
    
    
    
     
     
      
      height: 
      
      300px;
     
     
    
    

    
    
     
     
    
    
    
    
     
     
      
      background-color: red;
     
     
    
    

    
    
     
     
    
    
    
    
     
     
      
      position: relative;
     
     
    
    

    
    
     
     
    
    
    
    
     
     
      
      }
     
     
    
    

    
    
     
     
    
    
    
    
     
     
      
      .center{
     
     
    
    

    
    
     
     
    
    
    
    
     
     
      
      width: 
      
      100px;
     
     
    
    

    
    
     
     
    
    
    
    
     
     
      
      height: 
      
      100px;
     
     
    
    

    
    
     
     
    
    
    
    
     
     
      
      background-color: pink;
     
     
    
    

    
    
     
     
    
    
    
    
     
     
      
      position: absolute;
     
     
    
    

    
    
     
     
    
    
    
    
     
     
      
      left: 
      
      50%;
     
     
    
    

    
    
     
     
    
    
    
    
     
     
      
      top: 
      
      50%;
     
     
    
    

    
    
     
     
    
    
    
    
     
     
      
      margin-left: -
      
      50px;
     
     
    
    

    
    
     
     
    
    
    
    
     
     
      
      margin-top: -
      
      50px;
     
     
    
    

    
    
     
     
    
    
    
    
     
     
      
      }

5.display:table-cell

display:table-cell；与vertical-align:middle 的作用是让子盒子在数值方向上居中

margin:auto;则让子盒子在水平方向居中，若只想让盒子在某个方向居中，去掉另一个就可以了。


  
  
    
    
     
     
    
    
    
    
     
     
      
      .main{
     
     
    
    

    
    
     
     
    
    
    
    
     
     
      
      width: 
      
      300px;
     
     
    
    

    
    
     
     
    
    
    
    
     
     
      
      height: 
      
      300px;
     
     
    
    

    
    
     
     
    
    
    
    
     
     
      
      background-color: red;
     
     
    
    

    
    
     
     
    
    
    
    
     
     
      
      display: table-cell;
     
     
    
    

    
    
     
     
    
    
    
    
     
     
      
      vertical-align: middle;
     
     
    
    

    
    
     
     
    
    
    
    
     
     
      
      }
     
     
    
    

    
    
     
     
    
    
    
    
     
     
      
      .center{
     
     
    
    

    
    
     
     
    
    
    
    
     
     
      
      width: 
      
      100px;
     
     
    
    

    
    
     
     
    
    
    
    
     
     
      
      height: 
      
      100px;
     
     
    
    

    
    
     
     
    
    
    
    
     
     
      
      background-color: 
      
      #000;
     
     
    
    

    
    
     
     
    
    
    
    
     
     
      
      margin: auto;
     
     
    
    

    
    
     
     
    
    
    
    
     
     
      
      }