Выравнивание по центру блока произвольной ширины

Немного отступлю от темы, к вопросу выравнивания. Выровнять по центру элемент с заданной шириной можно с помощью - margin. То есть задаем ширину и отступ, выглядит это примерно так.

.div{	
	width:250px; 
	margin:0 auto;
}

Если блок имеет ширину в процентах, то свойство auto уже не поможет, но это не страшно, нужно просто применить немного математики.

Например блок у нас имеет ширину 40% от родителя. Чтобы его выровнять, нам надо отступить равномерно от обеих краев. Если ширина родителя 100% - 40% ширины нашего блока, остается 60%, значит по 30% на каждую сторону. Значит задаем такие параметры в стилях:

.div{	
	width:40%; 
	margin-left:30%;
}

Но тут следует учесть, маленькое НО! Если вы зададите блоку padding, его ширина увеличится, и выравнивание будет неровным. Поэтому следует это учесть, задавая внутренний отступ - padding в процентах, а потом от отступа слева отнимать этипроценты:

.div{	
	width:40%; 
	padding:0 5%;
	margin-left:25%;
}

Ну или же прописать блоку параметр box-sizing:padding-box; - он применяется для изменения алгоритма расчета ширины и высоты элемента, то есть ширина останется 40%, не смотря на padding.

Теперь вернемся к нашему случаю, когда нет ширины, вообще. Такое иногда встречается, и задавать ширину нам не нужно, как же быть в такой ситуации.

Есть один простенький способ, который состоит в том, что сначала мы смещаем наш блок вправо на половину ширины родителя, а потом двигаем влево на половину своей собственной ширины. Если посмотреть на код, то это будет выглядеть так:

        <div class="container">
            <div class="block">Содержание блока</div>
        </div>

И стили. которые все и сделают.

.container {
    float: left;  
    position:relative;
    left: 50%;                
}
block {            
    position:relative;
    left: -50%;
    float: left;
}

Теперь все станет четко по центру, но есть опять маленькое НО! Если Вы будете применять данный метод при адаптивной верстке, то у Вас появится маленький глюк, при уменьшении ширины страницы, родитель блока, будет на пол своей ширины вылазить за весь контент. Поэтому всю эту конструкцию нужно заключить еще в один блок или тому блоку в котором они уже у Вас находятся, нужно добавить нужную ширину и свойство - overflow:hidden;, которое обрежет все, что будет вылазить за пределы. Ваш блок и останется в центре, но пустота справа исчезнет, при маленьком размере страницы.

На этом все, спасибо за внимание. 🙂