div水平垂直居中方法及优缺点
代码:
<div class="father">
<div class="son">
</div>
</div>
方案一:
div绝对定位水平垂直居中【margin:auto实现绝对定位元素的居中】,
兼容性:,IE7及之前版本不支持
.son{
width: 200px;
height: 200px;
background: green;
position:absolute;
left:0;
top: 0;
bottom: 0;
right: 0;
margin: auto;
}
优点:
- 简单
缺点:
- IE(IE8 beta)中无效
- 无足够空间时,
.son
被截断,但是不会有滚动条出现
方案二:
div绝对定位水平垂直居中【margin 负间距】 这或许是当前最流行的使用方法。
width:200px;
height: 200px;
background:green;
position: absolute;
left:50%;
top:50%;
margin-left:-100px;
margin-top:-100px;
}
优点:
- 适用于所有浏览器
- 不需要嵌套标签
缺点:
- 没有足够空间时,.son会消失(类似
div
在body
内,当用户缩小浏览器窗口,滚动条不出现的情况)
方案三:
div绝对定位水平垂直居中【Transforms 变形】
兼容性:IE8不支持;
.son{
width: 200px;
height: 200px;
background: green;
position:absolute;
left:50%; /* 定位父级的50% */
top:50%;
transform: translate(-50%,-50%); /*自己的50% */
}
不定宽高的的水平垂直居中
方案四:
css不定宽高水平垂直居中,CSS3属性
.father{
display:flex;
justify-content:center;
align-items:center;
/* aa只要三句话就可以实现不定宽高水平垂直居中。 */
}
.son{
background: green;
width: ?px;
height: ?px;
}
方案五:
将父盒子设置为table-cell元素,可以使用text-align:center和vertical-align:middle实现水平、垂直居中。比较完美的解决方案是利用三层结构模拟父子结构
.father{
display: table-cell;
vertical-align: middle;
}
.son{
background: green;
width: ?px;
height: ?px;
margin: auto;
} 或者
.father{
display: table-cell;
vertical-align: middle;
text-align:center;
}
.son{
background: green;
width: ?px;
height: ?px;
display:inline-block;
}
优点:
.son 可以动态改变高度(不需在 CSS 中定义),.son 不会被截断
缺点:
Internet Explorer(甚至 IE8 beta)中无效,许多嵌套标签
方案六:
对子盒子实现绝对定位,利用calc计算位置
.box {
position: relative;
}
.div {
width: 200px;
height: 200px;
background: green;
position: absolute;
left: -webkit-calc((400px - 200px)/2);
top: -webkit-calc((400px - 200px)/2);
left: -moz-calc((400px - 200px)/2);
top: -moz-calc((400px - 200px)/2);
left: calc((400px - 200px)/2);
top: calc((400px - 200px)/2);
}
div水平垂直居中方法及优缺点的更多相关文章
- 【笔记】让DIV水平垂直居中的两种方法
今天写的了百度前端学院春季班的任务:定位和居中问题 由于距离上次学习CSS有点久远了,加上以前木有记笔记的习惯,方法忘得只剩下一种,今天通过网上查阅资料总结了以下两种简单的方法让DIV水平垂直居中. ...
- Div水平垂直居中的三种方法
百度了很多种方法,很多是不起作用的.下面这些方法是我亲自试过的.希望对大家有帮助! 下面是一波代码水军. <!DOCTYPE html> <html lang="en&qu ...
- div 固定宽高 水平垂直居中方法
div固定宽高,水平垂直居中,根据所用单位不同,分成两种情况,分别是"px"和"%"情况. 例:将三层div做出三个边框,要求水平垂直居中.效果如图 情况一(单 ...
- 如何让div水平垂直居中
引子 我们经常遇到需要把div中的内容进行水平和垂直居中.所以,这里介绍一种方法,可以使div水平居中和垂直居中. 代码: <!DOCTYPE html> <html lang=&q ...
- css两种常用的不定宽高的水平垂直居中方法,记住它,不再为样式发愁
css 几种常用的简单容易记住的水平垂直居中方法 前言 正文 第一种方法 第二种方法 结束语 前言 我们在设计网页时,会大量的运用到水平垂直居中,如果知道元素的宽高,那水平垂直居中是很简单的,无非是用 ...
- 【最全】CSS盒子(div)水平垂直居中居然还有这种方式
最全的CSS盒子(div)水平垂直居中布局,对CSS 布局掌握程度决定你在 Web 开发中的开发页面速度. 相对于屏幕 方法一:利用定位 <div class="box"&g ...
- 文字以及div水平垂直居中
文字以及div水平垂直居中.md <div class=”content”> <div class=”mydiv”> huangyingnin! </div>< ...
- DIV水平垂直居中的CSS兼容写法
DIV水平垂直居中,非IE浏览器可以用CSS3来处理,IE浏览器中分别处理IE6和/IE7.IE8.IE9. 在IE低版本中,虽然大致上没有问题,但还是有一些细微的显示问题. 示例如下: <!D ...
- scss : div水平垂直居中
scss 是一个很好用的css预处理语言,有很多很好的特性. 比如 mixin. 我们可以像使用函数那样使用mixin. 比如写一个div水平垂直居中. 上代码. @mixin absolute_ce ...
随机推荐
- JFinal架构简介
JFinal 是基于Java 语言的极速 web 开发框架,其核心设计目标是开发迅速.代码量少.学习简单.功能强大.轻量级.易扩展.Restful.在拥有Java语言所有优势的同时再拥有ruby.py ...
- C# 类初始化顺序
C#的类初始化顺序和Java以及C++类初始化顺序是不同的,曾经我被这个问题害惨了.对于C#和Java,其共同点都是先变量后构造函数,先静态后普通 区别在于,C#是子类变量->父类变量-> ...
- PAT 1054 求平均值 (20)(代码+思路+测试用例)
1054 求平均值 (20)(20 分) 本题的基本要求非常简单:给定N个实数,计算它们的平均值.但复杂的是有些输入数据可能是非法的.一个"合法"的输入是[-1000,1000]区 ...
- geoserver笔记
geoserver中只支持shp 的数据的发布,也就是.shp的数据.其他的如mapgis的数据则需要转成.shp的格式 要发布地图数据为WMS服务,首先得建立工作空间(也可以使用现有的工作空间),然 ...
- 04 存储库之mongodb
MongoDB 一 简介 MongoDB是一款强大.灵活.且易于扩展的通用型数据库1.易用性 MongoDB是一个面向文档(document-oriented)的数据库,而不是关系型数据库.不采用 ...
- mupdf编译snprintf冲突问题
mupdf-1.6-source\thirdparty\jbig2dec\config_win32.h //# define snprintf _snprintf
- Vue.js 生命周期的应用
生命周期示意图 值得注意的几个钩子函数 activated 类型:Function 详细: keep-alive 组件激活时调用. 该钩子在服务器端渲染期间不被调用. 参考: 构建组件 - keep- ...
- Vue.js2 + Laravel5 采用 CORS 方式解决 AJAX 跨域的问题
一.建立中间件 php artisan make:middleware CorsAjax 二.编写中间件 CorsAjax <?phpnamespace App\Http\Middleware; ...
- app怎么测试性能
性能测试一般来说 都是代码能力相对薄弱的测试人员 进阶的一个方向:但是当你成为一个真正的全栈人才的时候你就不得不学习代码: APP 或者安卓手机 或者iOS 一本测试他的性能的话都是采用:手机安装一 ...
- msys2 git status显示中文文件名问题
git config [--global] core.quotepath off https://stackoverflow.com/questions/5854967/git-msysgit-acc ...