Центрирование Div с помощью CSS

Question

У меня есть div, и я хочу центрировать его. Это отлично работает: .div{ position: relative; width: 300px; margin: 0 auto;}. Проблема в том, что мне нужно получить высоту div, используя jQuery $('div').height(). Однако это возвращает 0, но если я добавлю float: left к div, то jQuery работает, но div больше не центрируется.

Что я могу сделать?

Спасибо

Answer 1

Если у вас нет содержимого внутри div, он вернет ноль , если вы не укажете статическую высоту / минимальную высоту.

http://jsfiddle.net/NySST/2/

Answer 2

Предполагая, что - это содержимое в вашем <div>, вы, вероятно, неправильно очищаете float для своих внутренних элементов. Попробуйте добавить overflow: hidden к вашему <div> и посмотрите, решит ли это проблему.

Быстрый способ проверить, правильно ли вы очищаете свои поплавки, - задать вашему <div> произвольный цвет фона, например background: red, который покажет вам, как он оборачивает содержимое, если оно вообще есть. См. http://jsfiddle.net/Wexcode/PUETN/ для примера того, о чем я говорю. Обратите внимание, что высота красного фона представляет собой высоту вмещающего <div>.

Answer 3

Если вы можете указать точную ширину и высоту элемента div, его легко отцентрировать, используя jquery.

или вы можете попробовать этот код

$(document).ready(function(){

    $(window).resize(function(){

        $('#your-div-id').css({
            position:'absolute',
            left: ($(window).width() - $('#your-div-id').outerWidth())/2,
            top: ($(window).height() - $('#your-div-id').outerHeight())/2
        });

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

});

Answer 4

если ваш div имеет определенную ширину, вы можете попробовать установить стиль margin-left;авто;Маржа направо: авто;