方法一:position加margin 
方法二: diaplay:table-cell 
方法三:position加 transform 
方法四:flex;align-items: center;justify-content: center 
方法五:display:flex;margin:auto 
方法六:纯position 
方法七:兼容低版本浏览器,不固定宽高

总结

这种css布局平时用的比较多,也是面试题常出的一个题,网上一搜一大丢,不过还是想自己总结一下。

这种方法比较多,本文只总结其中的几种,以便加深印象。

效果图都为这个:

方法一:position加margin

/**html**/

<div class="wrap">

   <div class="center"></div>

</div>

/**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;

}

兼容性:主流浏览器均支持,IE6不支持

方法二: diaplay:table-cell

<!-- html -->

<div class="wrap">

    <div class="center"></div>

</div>

/*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;

}

兼容性:由于display:table-cell的原因,IE6\7不兼容

方法三:position加 transform

<!-- html -->

<div class="wrap">

   <div class="center"></div>

</div>

/* 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;

}

兼容性:ie9以下不支持 transform,手机端表现的比较好。

方法四:flex;align-items: center;justify-content: center

<!-- html -->

<div class="wrap">

   <div class="center"></div>

</div>

/* css */

.wrap {

   background: yellow;

   width: 200px;

   height: 200px;

   display: flex;

   align-items: center;

   justify-content: center;

}

.center {

   background: green;

   width: 100px;

   height: 100px;

}

移动端首选

方法五:display:flex;margin:auto

<!-- html -->

<div class="wrap">

   <div class="center"></div>

</div>

/* css */

.wrap {

   background: yellow;

   width: 200px;

   height: 200px;

   display: flex;

}
.center { background: green; width: 100px; height: 100px; margin: auto; }

移动端首选

方法六:纯position

<!-- html -->

<div class="wrap">

   <div class="center"></div>

</div>

/* 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;

}

兼容性:适用于所有浏览器

方法六中的方法一计算公式如下:

子元素(conter)的left值计算公式:left=(父元素的宽 - 子元素的宽 ) / 2=(200-100) / 2=50px; 
子元素(conter)的top值计算公式:top=(父元素的高 - 子元素的高 ) / 2=(200-100) / 2=50px;

方法二计算公式: 
left值固定为50%; 
子元素的margin-left= -(子元素的宽/2)=-100/2= -50px; 
top值也一样,固定为50%

子元素的margin-top= -(子元素的高/2)=-100/2= -50px;

方法七:兼容低版本浏览器,不固定宽高

<!-- html -->

<div class="table">

   <div class="tableCell">

       <div class="content">不固定宽高,自适应</div>

   </div>

</div>

/*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;

}

转自:

最新文章

  1. iOS Crash日志
  2. display~
  3. 【转】一个DIV+CSS代码布局的简单导航条
  4. OpenLDAP与phpldapadmin的搭建
  5. jetbrains DataGrip 导出Excel
  6. Laravel教程 一:安装及环境配置
  7. UVa 247 Calling Circles【传递闭包】
  8. 【转】The Zen of Python
  9. Adapting to views using css or js
  10. linux 的一些 不常见的指标
  11. IE8兼容placeholder的方案
  12. JavaScript-1.最简单的程序之网页弹出对话框,显示为Warning---ShinePans
  13. TCP中的MSS解读(转)
  14. arcgis api 3.x for js 入门开发系列四地图查询(附源码下载)
  15. 自用windows小软件
  16. C# foreach 值类型及引用类型迭代变量改变的方式
  17. springboot读取properties(yml)的几种常用方式
  18. tomcat热部署.class
  19. itcast-spring
  20. 【Android】amr文件时长

热门文章

  1. CSS样式基础总结
  2. github 相关英语
  3. mysql 可以跨库查询
  4. JSP多文件上传到服务器
  5. 第一章 Part 1/2 Git 一览
  6. Java 泛型 &lt;? super T&gt; 中 super 怎么 理解?与 extends 有何不同?
  7. hao916,hao123,2345.com浏览器劫持-分析与清除
  8. XP安装IIS来加载aspx页面(Web调用SAP数据)
  9. PHP收藏
  10. 在Azure虚拟机上安装SQL server