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

Author: reebu - Posted:5年前 - View:1256

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

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

0 人点赞 ∙ 0 人收藏

加入收藏点赞我要评论

目前共有 3 条回复

- zls511120 - 5年前

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

- fklangwang - 5年前

$(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

- oneside - 5年前

如楼上，用JQ多方便，代码少，兼容性强！