歡迎來到DIVCSS5查找CSS資料與學習DIV CSS布局技術!
  對于前端攻城獅,最重要的就是頁面,頁面的好看程度直接影響咱們的產品效益,所以,接下來呢我就給大家總結一下咱們前端攻城獅常用的居中效果的幾種實現方法:
 
  1.文字的垂直水平居中
 
  <style>
 
  div{
 
  width: 200px;
 
  height: 200px;
 
  background-color: greenyellow;
 
  color: white;
 
  /*行高等于盒子的高度,完成垂直居中*/
 
  line-height: 200px;
 
  /*元素的水平居中*/
 
  text-align: center;
 
  }
 
  </style>
 
  <div>垂直水平居中</div>
 
  ps:以上方法僅針對文字的水平居中
 
  2.盒子的垂直水平居中
 
  .outer{
 
  width: 300px;
 
  height: 300px;
 
  background-color: gainsboro;
 
  text-align: center;
 
  line-height: 100px;
 
  /*由于觸發了BFC規范,可以解決margin塌陷,完成垂直的居中*/
 
  overflow: hidden;
 
  margin: 0 auto;
 
  }
 
  .inner{
 
  width: 100px;
 
  height: 100px;
 
  background-color: pink;
 
  margin: 100px auto;
 
  }
 
  <div class="outer">
 
  <div class="inner">盒子居中</div>
 
  </div>
 
  3.圖片在盒子中的居中
 
  .box{
 
  width: 300px;
 
  height: 300px;
 
  border: 1px dotted blue;
 
  margin: 0 auto;
 
  line-height: 400px;
 
  text-align: center;
 
  }
 
  <div class="box">
 
  <img src="./happy.png" alt="">
 
  </div>
 
  ps:圖片的特殊的文本類型,所以使用普通文本的垂直水平居中方法即可完成圖片的居中,需要注意圖片的大小一定要小于盒子的一半,否則效果不明顯。
 
  4.使用定位實現盒子的居中
 
  .outer{
 
  width: 300px;
 
  height: 300px;
 
  background-color: #fcfdcd;
 
  position: relative;
 
  }
 
  .inner{
 
  width: 100px;
 
  height: 100px;
 
  background-color: #00ffcd;
 
  text-align: center;
 
  line-height: 100px;
 
  position: absolute;
 
  top: 50%;
 
  left: 50%;
 
  /*由于定位是以元素左上角為起始點,所以此時需要向上向左移動盒子的大小的一半*/
 
  margin-top: -50px;
 
  margin-left: -50px;
 
  }
 
  <div class="outer">
 
  <div class="inner">定位居中</div>
 
  </div>
 
  5.使用flex布局實現居中
 
  .outer{
 
  width: 300px;
 
  height: 300px;
 
  background-color: #d3d60e;
 
  display: flex;
 
  justify-content: center;
 
  align-items: center;
 
  }
 
  .inner{
 
  color: #fff;
 
  width: 100px;
 
  height: 100px;
 
  background-color: #13b86b;
 
  text-align: center;
 
  }
 
  <div class="outer">
 
  <div class="inner">flex居中</div>
 
  </div>
 
  6.網格布局實現居中
 
  .outer {
 
  width: 300px;
 
  height: 300px;
 
  background-color: gainsboro;
 
  text-align: center;
 
  line-height: 100px;
 
  display: grid;
 
  grid-template-columns: repeat(3,100px);
 
  grid-template-rows: repeat(3,100px);
 
  }
 
  .inner {
 
  width: 100px;
 
  height: 100px;
 
  background-color: pink;
 
  }
 
  <div class="outer">
 
  <div></div>
 
  <div></div>
 
  <div></div>
 
  <div></div>
 
  <div class="inner">網格居中</div>
 
  <div></div>
 
  <div></div>
 
  <div></div>
 
  <div></div>
 
  </div>
 
  7.元素在當前瀏覽器中垂直水平居中
 
  body{
 
  background-color:gray;
 
  }
 
  .box {
 
  width: 400px;
 
  height: 300px;
 
  line-height: 300px;
 
  text-align: center;
 
  background-color: orange;
 
  position: absolute;
 
  top: 50%;
 
  left: 50%;
 
  margin-left: -200px;
 
  margin-top: -150px;
 
  }
 
  <div class="box">瀏覽器中垂直水平居中</div>

如需轉載,請注明文章出處和來源網址:http://www.rs2pl.com/html/h62938.shtml

久久天天躁狠狠躁夜夜躁2020