css居中的几个实现方法

水平居中

  • 对于子元素是行内元素(或者inline-block)时使用text-aling: center; ,父元素宽度无论确定不确定,均可实现相对于父元素水平居中。
  <style>
    .box {
      border:1px solid #aaa;
      text-align: center;
     /*  text-align定义行内内容相对于父元素如何对齐 */
    }
    img {
      100px;
    }
  </style>
</head>
<body>
<div class="box">
  <img src="http://static.jsbin.com/images/dave.min.svg" alt=""> 
</div>
</body>

  • 对于子元素时块级元素时,使用外边距设置进行水平居中
  <style>
    .box {
      border:1px solid #aaa;
      300px;
    }
    
    .son {
      height: 200px;
      100px;
      border: 1px solid;
      margin: 0 auto;
   /*  子元素进行外边距设置   */
    }
  </style>
</head>
<body>
<div class="box">
  <div class="son"></div>
</div>
</body>

效果和上图一样

垂直居中

  • 块级元素里的文字垂直居中
    对于块级元素来说,它的高度在没有显示设置的情况下,是由子元素高度撑开的,所以对于子元素是内联元素的可以采取对父元素进行设置padding来进行垂直居中
 <style>
    .box {
      border:1px solid #aaa;
      100px;
      font-size: 14px;
      word-break:break-all;
      /* line-height: 2em; */
      padding: 14px;
    }
    
  </style>
</head>
<body>
<div class="box">
  <span>aaaaaaaaaaaaaaaaaafaddadfadfadfadfdfadfadfadfdfadafadfagadgadfadferew</span>
</div>

水平垂直居中

  • 子元素宽高确定

    1. 使用子元素margin进行居中
      <style>
        .box {
          border:1px solid #aaa;
          400px;
          height: 400px;
          
        }
        .son {
          height: 100px;
           100px;
          border: 1px solid;
          
          /* 代码如下 */
          margin-left: calc(50% - 50px);
          margin-top: calc(50% - 50px);      
        }
      </style>
    </head>
    <body>
    <div class="box">
      <div class="son"></div>
    </div>
    
  • 子元素宽高不确定

    • 使用定位加margin 居中
     <style>
    .box {
      border:1px solid #aaa;
      400px;
      height: 400px;
      
      position: relative;
    }
    .son {
      height: 100px;
       100px;
      border: 1px solid;
      
      /* 代码如下 */
      position: absolute;    
      top: 0; bottom: 0; left: 0; right: 0;
      margin: auto;
    }
    </style>
    
``` - 使用transform 来实现居中
```
 <style>
.box {
  border:1px solid #aaa;
  400px;
  height: 400px;
  
  position: relative;
}
.son {
  height: 100px;
   100px;
  border: 1px solid;
  
  /* x、y 轴 平移50% */
  position: absolute;   
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
  </style>
</head>
<body>
<div class="box">
  <div class="son"></div>
</div>

``` 
  • 当子元素是一个图片时,父元素使用text-align:center; 子元素设置vertical-align: middle;,且用父元素的伪元素等同父元素高度后设置为vertical-align:middle;

      <style>
        .box {
          border:1px solid #aaa;
          400px;
          height: 400px;
          text-align: center;
    
        }
        .box::after {content:'';
          display: inline-block;
          height:100%;
          vertical-align:middle;
        } 
        
        img {
          height: 100px;
          vertical-align:middle;
        }
      </style>
    </head>
    <body>
    <div class="box">
      <img src="http://static.jsbin.com/images/dave.min.svg" alt=''>
    </div>
    
    
  • 对父元素设置为table-cell来实现居中,需要设置宽高

      <style>
        .box {
          border:1px solid #aaa;
          400px;
          height: 400px;
          display: table-cell;
          vertical-align:middle;
          text-align:center;
        }
        img {
          height: 100px;
        }
      </style>
    </head>
    <body>
    <div class="box">
      <img src="http://static.jsbin.com/images/dave.min.svg" alt=''>
    </div>
    
  • flex 布局,使用主轴和侧轴的对齐方式来实现居中

    <style>
    .box {
      border:1px solid #aaa;
      400px;
      height: 400px;
      display: flex;
      justify-content: center;
     /*  主轴对齐方式 */
      align-items: center;
     /*  交叉轴对齐方式 */
    }
    img {
      height: 100px;
    }
    </style>
    </head>
    <body>
    <div class="box">
      <img src="http://static.jsbin.com/images/dave.min.svg" alt=''>
    </div>
    </body>
    
    

如有错漏,欢迎指正。

(∩_∩)-----代码改变生活。
原文地址:https://www.cnblogs.com/daixixi/p/9394509.html