一些居中方式的總結

時間 2019-12-06

標籤一些居中方式總結简体版

原文原文鏈接

居中

水平居中

對於子元素是行內元素(或者inline-block)時使用text-aling: center; ,父元素寬度不管肯定不肯定,都可實現相對於父元素水平居中。

<style>
    .box {
      border:1px solid #aaa;
      text-align: center;
     /*  text-align定義行內內容相對於父元素如何對齊 */
    }
    img {
      width: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;
      width:300px;
    }
    
    .son {
      height: 200px;
      width:100px;
      border: 1px solid;
      margin: 0 auto;
   /*  子元素進行外邊距設置   */
    }
  </style>
</head>
<body>
<div class="box">
  <div class="son"></div>
</div>
</body>

效果和上圖同樣svg

垂直居中

塊級元素裏的文字垂直居中

對於塊級元素來講，它的高度在沒有顯示設置的狀況下，是由子元素高度撐開的，因此對於子元素是內聯元素的能夠採起對父元素進行設置padding來進行垂直居中佈局

<style>
    .box {
      border:1px solid #aaa;
      width:100px;
      font-size: 14px;
      word-break:break-all;
      /* line-height: 2em; */
      padding: 14px;
    }
    
  </style>
</head>
<body>
<div class="box">
  <span>aaaaaaaaaaaaaaaaaafaddadfadfadfadfdfadfadfadfdfadafadfagadgadfadferew</span>
</div>

水平垂直居中

子元素寬高肯定flex

使用子元素margin進行居中spa

<style>
    .box {
      border:1px solid #aaa;
      width:400px;
      height: 400px;
      
    }
    .son {
      height: 100px;
      width: 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>

子元素寬高不肯定code

使用定位加margin 居中orm

<style>
.box {
  border:1px solid #aaa;
  width:400px;
  height: 400px;
  
  position: relative;
}
.son {
  height: 100px;
  width: 100px;
  border: 1px solid;
  
  /* 代碼以下 */
  position: absolute;    
  top: 0; bottom: 0; left: 0; right: 0;
  margin: auto;
}
</style>
</head>
<body>
<div class="box">
<div class="son"></div>
</div>

使用transform 來實現居中圖片

<style>
.box {
  border:1px solid #aaa;
  width:400px;
  height: 400px;
  
  position: relative;
}
.son {
  height: 100px;
  width: 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;rem

<style>
    .box {
      border:1px solid #aaa;
      width: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來實現居中，須要設置寬高it

<style>
    .box {
      border:1px solid #aaa;
      width: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 佈局，使用主軸和側軸的對齊方式來實現居中io

<style>
.box {
  border:1px solid #aaa;
  width: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>

若有錯漏，歡迎指正。