七种css方式让一个容器水平垂直居中

CarolineSim 3年前
   <h3><strong>阅读目录</strong></h3>    <p>方法一:position加margin</p>    <p>方法二: diaplay:table-cell</p>    <p>方法三:position加 transform</p>    <p>方法四:flex;align-items: center;justify-content: center</p>    <p>方法五:display:flex;margin:auto</p>    <p>方法六:纯position</p>    <p>方法七:兼容低版本浏览器,不固定宽高</p>    <p>总结</p>    <p>这种css布局平时用的比较多,也是面试题常出的一个题,网上一搜一大丢,不过还是想自己总结一下。</p>    <p>这种方法比较多,本文只总结其中的几种,以便加深印象。</p>    <p>效果图都为这个:</p>    <p><strong>方法一:position加margin</strong></p>    <pre>  <code class="language-css"><div class="wrap">      <div class="center"></div>  </div></code></pre>    <pre>  <code class="language-css">/**css**/  .wrap {      width: 200px;      height: 200px;      background: yellow;      position: relative;  }  .wrap .center {      width: 100px;      height: 100px;      background: green;      margin: auto;      position: absolute;      left: 0;      right: 0;      top: 0;      bottom: 0;  }</code></pre>    <p>兼容性:主流浏览器均支持,IE6不支持</p>    <p><strong>方法二: diaplay:table-cell</strong></p>    <pre>  <code class="language-css"><!-- html -->  <div class="wrap">       <div class="center"></div>  </div></code></pre>    <pre>  <code class="language-css">/*css*/  .wrap{      width: 200px;      height: 200px;      background: yellow;      display: table-cell;      vertical-align: middle;      text-align: center;  }  .center{      display: inline-block;      vertical-align: middle;      width: 100px;      height: 100px;      background: green;  }</code></pre>    <p>兼容性:由于display:table-cell的原因,IE67不兼容</p>    <p><strong>方法三:position加 transform</strong></p>    <pre>  <code class="language-css"><!-- html -->  <div class="wrap">      <div class="center"></div>  </div></code></pre>    <pre>  <code class="language-css">/* css */  .wrap {      position: relative;      background: yellow;      width: 200px;      height: 200px;}     .center {      position: absolute;      background: green;      top:50%;      left:50%;      -webkit-transform:translate(-50%,-50%);      transform:translate(-50%,-50%);      width: 100px;      height: 100px;  }</code></pre>    <p>兼容性:ie9以下不支持 transform,手机端表现的比较好。</p>    <p><strong>方法四:flex;align-items: center;justify-content: center</strong></p>    <pre>  <code class="language-css"><!-- html -->  <div class="wrap">      <div class="center"></div>  </div></code></pre>    <pre>  <code class="language-css">/* css */  .wrap {      background: yellow;      width: 200px;      height: 200px;      display: flex;       align-items: center;       justify-content: center;  }     .center {      background: green;      width: 100px;      height: 100px;  }</code></pre>    <p>移动端首选</p>    <p><strong>方法五:display:flex;margin:auto</strong></p>    <pre>  <code class="language-css"><!-- html -->  <div class="wrap">      <div class="center"></div>  </div></code></pre>    <pre>  <code class="language-css">/* css */  .wrap {      background: yellow;      width: 200px;      height: 200px;      display: flex;   }     .center {      background: green;      width: 100px;      height: 100px;      margin: auto;  }</code></pre>    <p>移动端首选</p>    <p><strong>方法六:纯position</strong></p>    <pre>  <code class="language-css"><!-- html -->  <div class="wrap">      <div class="center"></div>  </div></code></pre>    <pre>  <code class="language-css">/* css */  .wrap {      background: yellow;      width: 200px;      height: 200px;      position: relative;  }  /**方法一**/  .center {      background: green;      position: absolute;      width: 100px;      height: 100px;      left: 50px;      top: 50px;       }  /**方法二**/  .center {      background: green;      position: absolute;      width: 100px;      height: 100px;      left: 50%;      top: 50%;    margin-left:-50px;    margin-top:-50px;  }</code></pre>    <p>兼容性:适用于所有浏览器</p>    <p>方法六中的方法一计算公式如下:</p>    <p>子元素(conter)的left值计算公式:left=(父元素的宽 - 子元素的宽 ) / 2=(200-100) / 2=50px;</p>    <p>子元素(conter)的top值计算公式:top=(父元素的高 - 子元素的高 ) / 2=(200-100) / 2=50px;</p>    <p>方法二计算公式:</p>    <p>left值固定为50%;</p>    <p>子元素的margin-left= -(子元素的宽/2)=-100/2= -50px;</p>    <p>top值也一样,固定为50%</p>    <p>子元素的margin-top= -(子元素的高/2)=-100/2= -50px;</p>    <p><strong>方法七:兼容低版本浏览器,不固定宽高</strong></p>    <pre>  <code class="language-css"><!-- html -->  <div class="table">      <div class="tableCell">          <div class="content">不固定宽高,自适应</div>      </div>  </div></code></pre>    <pre>  <code class="language-css">/*css*/  .table {      height: 200px;/*高度值不能少*/      width: 200px;/*宽度值不能少*/      display: table;      position: relative;      float:left;      background: yellow;  }           .tableCell {      display: table-cell;      vertical-align: middle;      text-align: center;              *position: absolute;      padding: 10px;      *top: 50%;      *left: 50%;  }  .content {      *position:relative;      *top: -50%;      *left: -50%;       background: green;  }</code></pre>    <p>暂时总结上面的七种,这种方法太多,其实只要习惯了其中的一两种也就够用了。</p>    <p><strong>总结</strong></p>    <p>如果是移动端,那么用方法四和方法五是比较方便的。而且支持不固定宽高的情况,快、准、狠</p>    <p>也就是用 flex; align-items: center; justify-content: center;</p>    <pre>  <code class="language-css"><!-- html -->  <div class="wrap">      <div class="center"></div>  </div></code></pre>    <pre>  <code class="language-css">/* css */  .wrap {      background: yellow;      width: 200px;      height: 200px;      display: flex;      align-items: center;      justify-content: center;  }     .center {      background: green;      width: 100px;      height: 100px;  }</code></pre>    <p>或者display:flex;margin:auto;</p>    <pre>  <code class="language-css"><!-- html -->  <div class="wrap">      <div class="center"></div>  </div></code></pre>    <pre>  <code class="language-css">/* css */  .wrap {      background: yellow;      width: 200px;      height: 200px;      display: flex;  }     .center {      background: green;      width: 100px;      height: 100px;      margin: auto;  }</code></pre>    <p>如果是PC端,要考虑兼容性的话。方法六是不错滴,也就是纯position。</p>    <pre>  <code class="language-css"><!-- html -->  <div class="wrap">      <div class="center"></div>  </div></code></pre>    <pre>  <code class="language-css">/* css */  .wrap {      background: yellow;      width: 200px;      height: 200px;      position: relative;  }  /**方法一**/  .center {      background: green;      position: absolute;      width: 100px;      height: 100px;      left: 50px;      top: 50px;        }  /**方法二**/  .center {      background: green;      position: absolute;      width: 100px;      height: 100px;      left: 50%;      top: 50%;     margin-left:-50px;     margin-top:-50px;  }</code></pre>    <p>如果PC端的中间的元素高度不固定,那么就用方法七即可,代码就不复制了</p>    <p>这种css元素垂直的如果真的要总结起来,应该有十几二十几种。不过也没必要全部掌握吧,只要大概了解一些,用起来没有副作用就行。</p>    <p> </p>    <p> </p>    <p>来自:https://segmentfault.com/a/1190000007160925</p>    <p> </p>