0个牛币请下载代码后再发表评论精精精精原精精原原原原原原原原精相关分享原精最近下载最近浏览暂无贡献等级暂无贡献等级暂无贡献等级暂无贡献等级暂无贡献等级暂无贡献等级暂无贡献等级暂无贡献等级暂无贡献等级扫描二维码关注最代码为好友"/>扫描二维码关注最代码为好友HTML+CSS，让div在屏幕中居中（水平居中+垂直居中）方法总结
最近写网页经常需要将div在屏幕中居中显示，遂记录下几个常用的方法，都比较简单。
水平居中直接加上&center&标签即可，或者设置margin:当然也可以用下面的方法
下面说两种在屏幕正中（水平居中+垂直居中）的方法
放上示范的html代码：
class="main"&
div使用绝对布局，设置margin:并设置top、left、right、bottom的值相等即可，不一定要都是0。
text-align: center;
background-color: #fff;
border-radius: 20px;
width: 300px;
height: 350px;
margin: auto;
position: absolute;
bottom: 0;
效果如图：
仍然是绝对布局，让left和top都是50%，这在水平方向上让div的最左与屏幕的最左相距50%，垂直方向上一样，所以再用transform向左（上）平移它自己宽度（高度）的50%，也就达到居中效果了，效果图和上方相同。
text-align: center;
background-color: #fff;
border-radius: 20px;
width: 300px;
height: 350px;
position: absolute;
left: 50%;
transform: translate(-50%,-50%);
有不懂的地方欢迎加我QQ， 一起讨论——YinyouPoet
没有更多推荐了，
不良信息举报
举报内容：
HTML+CSS，让div在屏幕中居中（水平居中+垂直居中）方法总结
举报原因：
原文地址：
原因补充：
最多只允许输入30个字
加入CSDN，享受更精准的内容推荐，与500万程序员共同成长！CSS如何实现元素水平垂直居中 - 水平垂直居中对齐方法集锦-HTML5学堂
您当前位于： ——> CSS如何实现元素水平垂直居中 - 水平垂直居中对齐方法集锦
CSS如何实现元素水平垂直居中 - 水平垂直居中对齐方法集锦
作者：HTML5学堂（码匠）
关键词：CSS,水平,垂直,居中,方法
CSS实现元素水平垂直居中对齐
：前面给大家分享了网易NEC水平垂直居中的做法，但是开发中需要用到各种各样的水平垂直居中来实现，所以今天就给大家分享一下CSS实现水平垂直居中的做法。
第一种方法适用于文字
&div&class=&wrap&&
&&&&HTML5学堂、独行冰海、梦幻雪冰
&&&&width:&400
&&&&height:&400
&&&&background:&#
&&&&/*行高等于高度,垂直居中*/
&&&&line-height:&400
&&&&/*水平居中*/
&&&&text-align:&
行高等于高度的时候，文字处于垂直居中，设置了text-align: center的时候，文字处于水平居中；
第二种方法适用于图片
&div&class=&wrap&&
&&&&&img&src=&h5course.jpg&&alt=&独行冰海、梦幻雪冰&&title=&HTML5学堂&&
&&&&width:&400
&&&&height:&400
&&&&background:&#
&&&&/*行高等于高度,垂直居中*/
&&&&line-height:&400
&&&&/*水平居中*/
&&&&text-align:&
.wrap&img&{
&&&&/* 图片按道理需要设置display：block，在这边条件的限制，所以我们没有设置了 */
&&&&/* display:& */
&&&&width:&200
&&&&height:&200
&&&&/*垂直居中*/
&&&&vertical-align:&
结构简单，容易实现和理解
在IE6浏览器不兼容此方法
那么如何解决在IE6不支持该方法呢，其实很简单，如下：
&div&class=&wrap&&
&&&&&img&src=&Koala.jpg&&alt=&&&title=&&&
&&&&&span&&/span&
&&&&width:&400
&&&&height:&400
&&&&background:&#
&&&&/*行高等于高度,垂直居中*/
&&&&line-height:&400
&&&&/*水平居中*/
&&&&text-align:&
.wrap&img&{
&&&&/* 图片按道理需要设置display：block，在这边条件的限制，所以我们没有设置了 */
&&&&/* display:& */
&&&&width:&200
&&&&height:&200
&&&&/*垂直居中*/
&&&&vertical-align:&
.wrap&span&{
&&&&display:&inline-&
注意：添加了span标签，并且设置display属性设置为inline-block来使我们span标签拥有&layout&，这样就解决了在IE6不能兼容的问题.
无形中添加了空标签，所以不建议使用
第三种方法利用position和margin进行元素水平垂直居中
&div&class=&wrap&&
&&&&&div&class=&box&&梦幻雪冰&/div&
&&&&position:&
&&&&width:&400
&&&&height:&400
&&&&background:&#
&&&&position:&
&&&&left:&50%;
&&&&top:&50%;
&&&&width:&200
&&&&height:&200
&&&&margin:&-100px&0&0&-100
&&&&background:ϧ
欢迎沟通交流~
第四种方法利用position进行元素水平垂直居中
&div&class=&wrap&&
&&&&&div&class=&box&&HTML5学堂&/div&
&&&&position:&
&&&&width:&400
&&&&height:&400
&&&&background:&#
&&&&position:&
&&&&top:&0;
&&&&bottom:&0;
&&&&right:&0;
&&&&left:&0;
&&&&width:&200
&&&&height:&200
&&&&margin:&
&&&&background:ϧ
设置了绝对定位的话，CSS属性top、bottom、left、right都为0的话，这是不可能的，因为.box的元素有设置宽高，所以你只要在设置一个margin：auto，自然就居中了。
第五种方法利用display：table与table-cell进行元素水平垂直居中
&div&class=&wrap&&
&&div&class=&box&&
&&&div&class=&con&&梦幻雪冰&/div&
&&&&/*让元素以表格形式渲染*/
&&&&display:&
&&&&height:&400
&&&&width:&400
&&&&background:&#
&&&&/*让元素以表格的单元素格形式渲染*/
&&&&display:&table-
&&&&/*使用元素的垂直对齐*/
&&&&vertical-align:&
&&&&width:&200
&&&&height:&200
&&&&margin:&0&
&&&&background:ϧ
这种方法不会像前面的两种方法一样，有高度的限制，此方法可以要据元素内容动态的改变高度，从而也就没有空间的限制，元素的内容不会因为没足够的空间而被切断或者出现难看的滚动条。
不足之处呢？这种方法只适合现代浏览器，在IE6-7下无法正常运行。
那么如何解决兼容IE6、IE7呢？
&div&class=&wrap&&
&&div&class=&box&&
&&&div&class=&out&&
&&&&div&class=&con&&梦幻雪冰&/div&
&&&&position:&
&&&&/*让元素以表格形式渲染*/
&&&&display:&
&&&&height:&400
&&&&width:&400
&&&&background:&#
&&&&/*让元素以表格的单元素格形式渲染*/
&&&&display:&table-
&&&&/*使用元素的垂直对齐*/
&&&&vertical-align:&
&&&&/*利用hack技术*/
&&&&*position:&
&&&&*top:&50%;
&&&&*left:&50%;
&&&&/*利用hack技术*/
&&&&*position:
&&&&*top:&-50%;
&&&&*left:&-50%;
&&&&width:&200
&&&&height:&200
&&&&/*水平垂直居中*/
&&&&margin:&0&
&&&&background:ϧ
第六种方法利用display：table-cell进行元素水平垂直居中
&div&class=&wrap&&
&&div&class=&box&&
&&梦幻雪冰
&&&&display:&table-
&&&&width:&400
&&&&height:&400
&&&&background:&#
&&&&vertical-align:&
&&&&width:&200
&&&&height:&200
&&&&margin:&0&
&&&&background:ϧ
这种方法的优点和方法三是一样的，不会有高度的限制。
IE6、IE7不支持
第七种方法元素(空标签)水平垂直居中
&div&class=&floater&&&/div&
&div&class=&box&&
&独行冰海、梦幻雪冰
&&&&height:&100%;
&&&&position:&
&&&&/*清除浮动*/
&&&&clear:
&&&&height:&300
&&&&width:&300
&&&&margin:&0&
&&&&background:ϧ
.floater&{
&&&&float:
&&&&/*相对于父元素高度的50%*/
&&&&height:50%;
&&&&/*居中元素高度的一半*/
&&&&margin-bottom:&-150
&&&&background:&#
相关文章推荐
欢迎沟通交流~
阅读：4479
《HTML5布局之路》资源下载
你可能感兴趣的文章
HTML5学堂（码匠）创始人
Copyright (C)
黑白任你选：}