居中之美之垂直居中系列
参考自:http://www.w3cplus.com/collective-5.html
元素垂直居中
1、元素内容是单行,并且其高度是固定不变的,你只要将其“line-height”设置成和“height”值一样就Ok了。(必须单行文本,且高度一定)
1 | html:< div class="vertical">content</ div > csss: .vertical { height: 100px; line-height: 100px;/*值等于元素高度的值*/ } |
2、给容器设置绝对定位(position:absolute),并且定位高度(top:50%)和margin-top为高度的一半(margin-top:-height/2)。这样实现的是元素的垂直居中,而不是元素中的内容。,同理水平居中可以设定宽度,left:50%.margin-left:-width/2;
备注:元素定位关系到一个相对定位参考,所以要保证元素是相对于哪个为参考坐标;绝对定位,top,left是相对于postion:relative的父元素的
(高度必须确定)
1 2 3 4 5 | html:< div class="vertical">content</ div > css: .vertical { height: 100px;/*元素的高度*/ position: absolute; top: 50%;/*元素的顶部边界离父元素的的位置是父元素高度的一半*/ margin-top: -50px;/*设置元素顶边负边距,大小为元素高度的一半*/ |
3、使用 vertiacl-align:middle 属性值,可以设置行内元素在父容器中垂直居中:
方法:借助一个空的span标签,设置高度100%,使要居中的元素和span元素的vertiacl-align属性都为middle
1 2 3 4 5 6 7 8 | < div class="page"> < span class="vertical"></ span > < a href="">< img src="/Images/1.jpg" alt="" class="img404"></ a > </ div > .page{ height: 100%;width: 100%;text-align: center; top: 0; left: 0;position: absolute;} .img404{ width: 400px; vertical-align: middle; } .vertical{ display:inline-block;width: 1px;height: 100%;margin-left: -1px; vertical-align:middle; } |
4、使用的的div模拟表格效果,利用vertical-align的第二种用法用于表格单元格中(不需要设置高度)
1 2 3 4 5 6 7 8 9 10 11 12 13 | < div id="container"> < div id="content">content</ div > </ div > #container { height: 300px; display: table;/*让元素以表格形式渲染*/ } #content { display:table-cell;/*让元素以表格的单元素格形式渲染*/ vertical-align: middle;/*使用元素的垂直对齐*/ } |
5、借助空div,使用float和margin-left:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | < body > < div id="floater"> <!--This block have empty content --> </ div > < div id="content">Content section</ div > </ body > html,body {height: 100%;}#floater{ float:left; height:50%;/*相对于父元素高度的50%*/ margin-bottom: -120px;/*值大小为居中元素高度的一半(240px/2)*/ } #content { clear:both;/*清除浮动*/ height: 240px; position: relative; } |
6、这个方法是针对多行内容居中,而且容器高度是可变的,方法很简单,就是给出上下一样的padding值
(使用这种方法不能给容器固定高度,如果固定高度将无法达到效果。)
1 2 3 4 5 | < div class="columns"> < div class="item">test</ div > </ div > .item {padding-top:30px;padding-bottom:30px;} |
7、任意大小,垂直水平居中,通过jquery。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | < div class="container"> < p >Centered In The Middle Of The Page With jQuery</ p > </ div > .container{ background-color:#338BC7; width:270px; height:150px; } $(document).ready(function(){ $(window).resize(function(){ $('.container').css({ position:'absolute', left: ($(window).width() - $('.container').outerWidth())/2, top: ($(window).height() - $('.container').outerHeight())/2 }); }); // 最初运行函数 $(window).resize(); }); |
附加垂直水平居中插件(封装刚才的js):
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | (function($){ $.fn.vhAlign = function(){ return this.each(function(i){ //获取元素的内容高度 var h = Math.ceil($(this).height()); //outerHeight=padding+border+height var oh = Math.ceil($(this).outerHeight()); //取得margin-top值 var mt = Math.ceil(oh / 2); //取得元素宽度 var w = Math.ceil($(this).width()); //outerWidth=padding+border+width var ow = Math.ceil($(this).outerWidth()); //取得margin-left var ml = Math.ceil(ow / 2); //实现元素居中效果 $(this).css({ "margin-top": "-" + mt + "px", "top": "50%", "margin-left": "-" + ml + "px", "left": "50%", "width":w, "height":h, "position": "absolute" }); }); }; })(jQuery); |
只需要引用以上js,对需要居中的div,调用其方法即可 $(document).ready(function(){ $(".wrap").vhAlign(); });
(备注:,如果元素不是相对于body居中,那么需要设置其父元素中为相对定位。)
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步