Тези две решения изискват само два вложени елемента.
Първо - Относително и абсолютно позициониране ако съдържанието е статично (ръчно центриране).
.black {
position:relative;
min-height:500px;
background:rgba(0,0,0,.5);
}
.message {
position:absolute;
margin: 0 auto;
width: 180px;
top: 45%; bottom:45%; left: 0%; right: 0%;
}
https://jsfiddle.net/GlupiJas/5mv3j171/
или за течен дизайн - за точен център за съдържание използвайте примера по-долу:
.message {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
https://jsfiddle.net/GlupiJas/w3jnjuv0/
Трябва да зададете „минимална височина“, в случай че съдържанието надвишава 50% от височината на прозореца. Можете също да манипулирате тази височина с медийна заявка за мобилни и таблетни устройства. Но само ако играете с отзивчив дизайн.
Предполагам, че можете да отидете по-далеч и да използвате прост JavaScript/JQuery скрипт, за да манипулирате минималната височина или фиксираната височина, ако има нужда по някаква причина.
Второ - ако съдържанието е течно можете също да използвате css свойства на таблица и клетка на таблица с вертикално подравняване и центрирано подравняване на текста:
/*in a wrapper*/
display:table;
и
/*in the element inside the wrapper*/
display:table-cell;
vertical-align: middle;
text-align: center;
Работи и мащабира перфектно, често се използва като адаптивно решение за уеб дизайн с мрежови оформления и медийни заявки, които манипулират ширината на обекта.
.black {
display:table;
height:500px;
width:100%;
background:rgba(0,0,0,.5);
}
.message {
display:table-cell;
vertical-align: middle;
text-align: center;
}
https://jsfiddle.net/GlupiJas/4daf2v36/
Предпочитам таблично решение за точно центриране на съдържанието, но в някои случаи относителното абсолютно позициониране ще свърши по-добра работа, особено ако не искаме да запазим точната пропорция на подравняването на съдържанието.
person
DevWL
schedule
01.09.2015
