div+css盒子居中

1.利用margin

优点：兼容性好
缺点：必须知道内容盒子的高度才可以，有了这点限制；

div1的宽减去div2的宽就是div2margin-left的数值：（100-40）/2=30
div1的高减去div2的高就是div2margin-top的数值：（100-40）/2=30

 <style type="text/css">.div1{  width: 100px; height: 100px; border: 1px solid #000000;} .div2{ width:40px ; height: 40px; background-color: green;}.div22{margin-left: 30px;margin-top: 30px;}</style><div class="div1"><div class="div2 div22"></div></div>

2. position+50%

缺点：IE6及以上

把div2相对于div1的top、left都设置为50%，然后再用margin-top设置为div2的高度的负一半拉回来，用margin-left设置为宽度的负一半拉回来

<style type="text/css">.div1{  width: 100px; height: 100px; border: 1px solid #000000;} .div2{ width:40px ; height: 40px; background-color: green;}.div11{position: relative;}.div22{position: absolute;top:50%;left: 50%;margin-top: -20px;margin-left: -20px;}</style><div class="div1 div11"><div class="div2 div22"></div></div>

3.position+margin:auto

缺点：不兼容ie6,7

<style type="text/css">.div1{  width: 100px; height: 100px; border: 1px solid #000000;} .div2{ width:40px ; height: 40px; background-color: green;}.div11{position: relative;}.div22{position: absolute;margin:auto; top: 0;left: 0;right: 0;bottom: 0;}</style><div class="div1 div11"><div class="div2 div22"></div></div>

4.table-cell+vertical-align:middle+margin:auto

<style>.div1{width: 100px;height:100px;border: 1px solid #000;display: table-cell;vertical-align: middle;}.div2{width:50px;height:50px;background: yellow;margin: auto}
</style>
<div class="div1"><div class="div2"></div>
</div>

5.flex

缺点：不支持IE

<style>.div1{width: 100px;height:100px;border: 1px solid #000;display: flex;align-items: center;jusstify-content: center;}.div2{width:50px;height:50px;background: yellow;}
</style>
<div class="div1"><div class="div2"></div>
</div>

6.position+transform

<style>.div1{width: 100px;height:100px;border: 1px solid #000;position: relative;}.div2{width: 80px;height: 80px;background: yellow;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);}
</style>
<div class="div1"><div class="div2"></div>
</div>

div+css盒子居中相关推荐

html盒子居中的方式,CSS盒子居中三种方法
前言 CSS盒子居中,我觉得是很有必要学习一下的.特别是第三种方法,奇淫技巧升级版,也是生产环境中非常常见的一种方法,不需要知道宽度,随着祖先元素的变化而变化! 1.常规方法常规方法只需要给盒子设置 ...
html div css盒子,CSS盒子模式一(DIV布局快速入门)_html/css_WEB-ITnose
中心最新招了几十个人,我也成小旋风了,看来这个山头还得呆几天.毕竟有几十口子人哪,咋能撒手不管啊!我就先发个贴热热身!也希望前几届的师哥师姐多多指教. 我们在网页设计中常听的属性名:内容(conte ...
CSS 盒子居中详解
我们在做web练习或项目的时候,经常会碰到盒子居中问题,今天给大家总结了几种方法,希望能有所帮助! 居中目录 1. 内容水平居中 2. 一行文字垂直居中 3. 盒子水平居中 4. 子元素在父元素中居中 ...
div+css盒子模型
目录文章目录前言 css是什么? css的引入方式选择器字体和文本样式选择器进阶结构选择器页面布局盒子模型浮动属性定位属性案例:底部半透明定位效果综合案例:学成在线项目总结 ...
Div+CSS布局居中
.bbs_Main{width:1000px; position:absolute; left:50%; margin-left:-500px;} 这个非常有效. 转载于:https://www.cn ...
css设置div上下左右均居中、底部居中
css设置div或盒子居中 #垂直居中 #左右居中 #底部居中类型一:固定宽度高度 html代码 <div class="login_container"><d ...
html盒子自动居中,css盒子怎么居中？
在前端切图的时候,可能经常会遇到一个div盒子怎么在固定区域垂直居中的需求,下面我们来看一下css实现盒子居中的方法. css设置盒子居中的方法: 第一种: 用css的position属性 .div1 ...
html5 div居中样式,div css 居中有哪些形式与居中代码
div css 居中有哪些模式与居中代码在HTML组织中会碰到各种千般居中名目配置,比方内容居中(水准居中).内容垂直居中.组织居中等常见CSS居中需要设置,这里CSS5介绍种种居中实例与居中代码. ...
彻底弄懂CSS盒子模式一(DIV布局快速入门)
彻底弄懂CSS盒子模式一(DIV布局快速入门) 作者:唐国辉实例网页网址:http://www.blueidea.com/articleimg/2007/03/4545/css2.ht ...