div+css css怎么让div居中一个小div在另一个大div里面 垂直居中

来源：蜘蛛抓取(WebSpider) 时间：2017-08-16 00:40 标签： css怎么让div居中
搜索end -->
纯CSS实现不固定大小div相对于body垂直居中效果
作者/代码整理：&&(转载请附加本文地址，带有“懒人原生”字样的谢绝转载) 发布日期：
这个可谓是css的高级写法
兼容IE8/IE9/IE10/IE11
火狐，谷歌，360等各种主流浏览器
相对于body居中的另外一种写法
原理比较难以理解，这里只简单的说下如何使用：
1、在body的根目录下建立两个嵌套的div
2、分别给两个div加上样式属性即可，详细请见附件index.html文件
猜你喜欢...div+css垂直居中的五种实现方法
来源：易贤网&& 阅读：56 次&&日期： 10:40:38
温馨提示：易贤网小编为您整理了“div+css垂直居中的五种实现方法”,方便广大网友查阅！
方法一：把一些 div 的显示方式设置为表格，因此我们可以使用表格的 vertical-align属性。
结构效果如下：
div#wrapper {
width: 500
height: 500
background-color: #c00;
display: table-
div#cell {
display: table-
vertical-align:
&div id=wrapper&
&div id=row&
&div id=cell&
if you want to sell sugar water for the rest of my life or want a chance to change the world
优点：不用受内容高度的限制，简单实现垂直居中；
缺点：不兼容ie6,7
方法二：这个方法使用绝对定位的 div，把它的 top 设置为 50％，margin-top 设置为负的 content 高度。这意味着对象必须在 css 中指定固定的高度。
结构效果如下：
div#wrapper {
width: 500
height: 500
background-color: #c00;
div#content {
width: 400
height: 300
margin-top: -150
background-color:
&div id=wrapper&
&div id=content&
优点：兼容性好
缺点：必须知道内容盒子的高度才可以，有了这点限制；
方法三：这个方法和方法二的原理是一样的。废话不多说看代码
height: 500
width: 500
background-color:
.additional {
height: 50%;
margin-bottom: -120
#content {
height:240
width:70%;
background-color: #000;
&div class=wrap&
&div class=additional&&/div&
&div id=content&
优缺点和法二一样，缺点嘛多了个额外的标签；
方法四：这个方法使用了一个 position:absolute，有固定宽度和高度的 div。这个 div 被设置为 top:0; bottom:0;。但是因为它有固定高度，其实并不能和上下都间距为 0，因此 margin: 会使它居中。使用 margin:使块级元素垂直居中是很简单的。
结构效果如下：
#content {
height:240
width:70%;
background-color: #000;
&div id=content&
content here&/div&
优点：非常简单
缺点：不兼容ie6,7
方法五：这个方法只能将单行文本置中。只需要简单地把 line-height 设置为那个对象的 height 值就可以使文本居中了。这个就不用实例了，您你看就明白
更多信息请查看
【】&&&&&【点此处查询各地各类考试咨询QQ号码及交流群】
易贤网手机网站地址：
由于各方面情况的不断调整与变化，易贤网提供的所有考试信息和咨询回复仅供参考，敬请考生以权威部门公布的正式信息和咨询为准！
相关阅读 & & &
&&& &nbsp&nbsp&nbsp会员注册
本站不参与评论！（）
自觉遵守：爱国、守法、自律、真实、文明的原则
尊重网上道德，遵守中华人民共和国各项有关法律法规
严禁发表危害国家安全，破坏民族团结、国家宗教政策和社会稳定，含侮辱、诽谤、教唆、淫秽等内容的评论
承担一切因您的行为而直接或间接导致的民事或刑事法律责任
您在本站发表的评论，本站有权保留、转载、引用或者删除
参与本评论即表明您已经阅读并接受上述条款2013年10月 Web 开发大版内专家分月排行榜第三
2016年2月 总版技术专家分月排行榜第二2014年2月 总版技术专家分月排行榜第二2013年4月 总版技术专家分月排行榜第二
2016年10月优秀小版主
2016年8月优秀小版主2016年7月优秀小版主优秀小版主2015年7月优秀小版主2015年9月优秀小版主2015年5月优秀小版主2014年11月论坛优秀版主
匿名用户不能发表回复！|
每天回帖即可获得10分可用分！小技巧：
你还可以输入10000个字符
(Ctrl+Enter)
请遵守CSDN，不得违反国家法律法规。
转载文章请注明出自“CSDN（www.csdn.net）”。如是商业用途请联系原作者。

我要回帖

更多关于 css怎么让div居中 的文章

 

随机推荐