实现网页元素的垂直左右居中,好奇你们是用JS还是CSS啊?

reebu 6个月前 236

每次要实现网页元素的垂直左右居中就头疼,如果只是垂直居中就简单了,只要用margin: 0 auto就搞定了,考虑IE兼容性问题的话,再用一个text-align: center就OK。

但是需要再加上左右居中的话,那就麻烦了,CSS要写一大堆,网上搜索了答案,要实现网页元素的垂直左右居中,不但要把元素的宽高固定,还要绝对定位,进行上下边距计算的时候,还要减去元素本身的宽高的一半,太麻烦了,看了就头疼,写着就累,很好奇平时你们要实现垂直左右居中的话,到底是选择用JS还是CSS呢?还是两者都用呢?

0 人点赞  ∙  0 人收藏  
加入收藏 点赞 我要评论

目前共有 3 条回复

fmtq
fmtq 6个月前

如果无法确定元素的高度,那肯定选择用JS啊

fklangwang
fklangwang 6个月前
$(window).resize(function(){
    $('.className').css({
        position:'absolute',
        left: ($(window).width() - $('.className').outerWidth())/2,
        top: ($(window).height() - $('.className').outerHeight())/2
    });
});

// To initially run the function:
$(window).resize();

无意发现老外的BLOG,文章里还附了demo。
MicroTut: Centering a Div Both Horizontally And Vertically

dlah
dlah 6个月前

如楼上,用JQ多方便,代码少,兼容性强!