css居中-水平居中,垂直居中,上下左右居中


網頁布局居中必不可少,其中包括水平居中,垂直居中,上下左右居中,下面一一詳述。

水平居中

<div class="container">
  <div class="item">居中</div>
</div>

 

1.text-align: center;

  對父元素設置text-align: center;子元素即可居中。但子元素是有限制的,只對圖片,文字等行內元素有效。
  如果子元素有一定寬度,可以設置子元素display:inline-block;
  
  <style>
    .container {
      text-align: center;
    }

    .item{
      display: inline-block;
      width: 100px;
      background-color: #ff266e;
    }

  </style>

效果

 

 

2.margin: 0 auto;

  
元素本身設置 margin: 0 auto; 這種方法對能設置寬度的元素起作用.
  <style>
    .container {
      text-align: center;
      background-color: #a08b8b;
    }

    .item{
      margin: 0 auto;
      width: 100px;
      background-color: #ff266e;
    }

  </style>

 

 效果

 

3.position:absolute;

  這種方法也需要固定元素的寬度.

  <style>
    .container {
      text-align: center;
      position: relative;
    }

    .item{
      position: absolute;
      width: 100px;
      left: 0;
      right: 0;
      margin: auto;
      background-color: #ff266e;
    }

  </style>

 

 效果

 

 

 

4.flex

  

  <style>
    .container {
      text-align: center;
      display: flex;
      justify-content: center;
      background-color: #ffecf7;
    }

    .item{
      background-color: #ff266e;
    }

  </style>

 

 

效果

 

 

 垂直居中

 

1.一行文字垂直居中

  <style>
    .center {
      height: 100px;
      line-height: 100px;
      background-color: #ffecf7;
    }
  </style>

 

<div class="center">
  這行文字垂直居中
</div>

 

效果

 

 

 2.未知高度元素居中

 

  第一種方法

<div class="container">
  <div class="item">
    <p>垂直居中的元素</p>
    <p>垂直居中的元素</p>
  </div>
</div>

  <style>
    .container {
      font-size: 0;
      background-color: #ffecf7;
      height: 200px;
    }
    .container:after {
      content: '';
      display: inline-block;
      vertical-align: middle;
      height: 100%;
    }
    .item {
      display: inline-block;
      vertical-align: middle;
      font-size: 12px;
      background-color: #ff266e;
    }
  </style>

 

 

第二種方法

  <style>
    .container {
      display: flex;
      background-color: #ffecf7;
      height: 200px;
      align-items: center;
    }

    .item {
      height: 100px;
      background-color: #ff266e;
    }
  </style>

 

 

效果

 

 

 

3.高度已知垂直居中

第一種方法

<div class="container">
  <div class="item">
    <p>垂直居中的元素</p>
    <p>垂直居中的元素</p>
  </div>
</div>

  <style>
    .container {
      position: relative;
      background-color: #ffecf7;
      height: 200px;
    }

    .item {
      position: absolute;
      top: 0;
      bottom: 0;
      margin: auto;
      height: 100px;
      background-color: #ff266e;
    }
  </style>

 

第二種方法

  <style>
    .container {
      position: relative;
      background-color: #ffecf7;
      height: 200px;
    }

    .item {
      position: absolute;
      top: 50%;
      margin-top: -50px;
      height: 100px;
      background-color: #ff266e;
    }
  </style>

 

第三種方法

  <style>
    .container {
      position: relative;
      background-color: #ffecf7;
      height: 200px;
    }

    .item {
      position: absolute;
      top: 50%;
      transform: translate(0,-50%);
      height: 100px;
      background-color: #ff266e;
    }
  </style>

 

 

效果

 

 

上下左右居中

上下垂直居中,把上面的綜合起來就可以啦

 

1.子元素寬和高不確定

 

第一種方法

  <style>
    .container {
      display: flex;
      background-color: #ffecf7;
      height: 200px;
      align-items: center;
      justify-content: center;
    }

    .item {
      background-color: #ff266e;
    }
  </style>

 

第二種方法

  <style>
    .container {
      background-color: #ffecf7;
      height: 200px;
      font-size: 0;
      text-align: center;
    }
    .container:after {
      content: '';
      display: inline-block;
      height: 100%;
      vertical-align: middle;
    }

    .item {
      display: inline-block;
      background-color: #ff266e;
      vertical-align: middle;
      font-size: 12px;
    }
  </style>

 

 

2.子元素寬和高確定

第一種方法

  <style>
    .container {
      position: relative;
      background-color: #ffecf7;
      height: 200px;
    }


    .item {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      margin: auto;
      width: 120px;
      height: 120px;
      background-color: #ff266e;

    }
  </style>

 

第二種方法

  <style>
    .container {
      position: relative;
      background-color: #ffecf7;
      height: 200px;
    }


    .item {
      position: absolute;
      top: 50%;
      left: 50%;
      margin: -60px -60px;  /*寬,高的一半*/
      width: 120px;
      height: 120px;
      background-color: #ff266e;

    }
  </style>

 

第三種方法

  <style>
    .container {
      position: relative;
      background-color: #ffecf7;
      height: 200px;
    }


    .item {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);  
      width: 120px;
      height: 120px;
      background-color: #ff266e;

    }
  </style>

 

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM