Выравнивание div по центру

Существует несколько способов выровнять div по центру:

div.center {
    margin:0 auto;
}
div.center {
    margin:0 25% 0 25%;
    width:50%;
}

Грязные извращения вроде:

div.center {
    left: 50%;
    margin-left: -500px;
    position: absolute;
    width: 1000px;
}

Но это не всегда сработает. Давайте представим ситуацию, скажем вы делаете адаптивный сайт, ширина заранее не известна, внутри дива контент произвольной ширины(на разных страницах - разный), так же некоторые блоки прижаты вправо и влево. Как выровнять такой блок со всем содержимым по центру сохранив адаптивность?

Все очень просто:


<style type="text/css">
.center {
    position: relative;
    width: 100%;
}

.center:after {
    content: '';
    display: block;
    clear: both;
}

.aleft {
    position: relative;
    right: 50%;
    float: right;
}

.aright {
    position: relative;
    z-index: 1;
    right: -50%;
}
</style>

<div class="center">
    <div class="aleft">
        <div class="aright">
            Ширина блока зависит от размера надписи.
        </div>
    </div>
</div>

Add comment


Security code
Refresh

Found a typo? Please select it and press Ctrl + Enter.