Блок с высотой и шириной в процентах по центру web-страницы

@Ultran · Регистрация: 15.09.2012

Author24 — интернет-сервис помощи студентам

Здравствуйте!
Подскажите пожалуйста, что я делаю не так?
Пытаюсь разместить слой "wrapper" по центру веб страницы. Ширина и высота блока заданы в процентах. Позиционирование - абсолютное. У меня почему-то блок уползает вверх.
Делаю как описано тут: http://htmlbook.ru/layout/sloy... -stranitsy. Код прилагаю.

CSS

.wrapper {
    position: absolute;
    width: 70%;
    height: 60%;
    left: 50%;
    top: 50%;
    margin-left: -35%; 
    margin-top: -30%;
    overflow: auto;
    background: #ff0000;
}

Вот скриншот того, что у меня вышло:

Блок с высотой и шириной в процентах по центру web-страницы

А нужно - как здесь:

Заранее спасибо!

Комментарий модератора

Прикрепляйте файлы и изображения к сообщениям.
https://www.cyberforum.ru/abou... post594251

@art one · 30.01.2014, 11:15

попробуй {
margin: 0 auto;
}

@BiOpSIhoS · 30.01.2014, 12:22

Сообщение от Ultran

Подскажите пожалуйста, что я делаю не так?

что бы заработало в вашем случае надо задать ширину, высоту и маргины не в процентах а в пикселях. С процентами чуть по другому надо, вот так как то:

HTML5

<! doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Красный блок в центре</title>
<style>
 
 body {
    margin:0px;
    padding:0px;
 }
 
.first{
    outline: solid 1px #333;
    outline-offset: -4px;;
    position: relative;
    height: 100%;
 
}
 
.second{
    position: absolute;
    margin: auto;
    right: 0;
    left: 0;
    bottom: 0;
    top: 0;
    width: 40%;
    height: 40%;
    background-color: #E21B1B;
}
 </style>
 
</head>
 
<body>
    <div class="first">
        <div class="second"></div> 
    </div>
</body>
 
</html>

@Ultran · 30.01.2014, 14:31 **[ТС]**

art one, ну это не совсем то, что нужно. Это выравнивание слоя только по центру по горизонтали, а нужно еще и по вертикали.
BiOpSIhoS, большое спасибо! Разобрался!

Плюсанул в репутацию

@art one 0 / 0 / 0 Регистрация: 03.06.2013 Сообщений: 3
	30.01.2014, 11:15	2
	попробуй { margin: 0 auto; } 0

@Ultran 3 / 3 / 2 Регистрация: 15.09.2012 Сообщений: 86
	30.01.2014, 14:31 [ТС]	4
	art one, ну это не совсем то, что нужно. Это выравнивание слоя только по центру по горизонтали, а нужно еще и по вертикали. BiOpSIhoS, большое спасибо! Разобрался! Плюсанул в репутацию 0

Блок с высотой и шириной в процентах по центру web-страницы

Решение