Выровнять форму по центру страницы

@Listed Illusion · Регистрация: 12.05.2016

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

Всем привет!
У меня вот такая проблема, нужно форму выставить по середине страницы, вот код

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="main.css" type="text/css" />
</head>
<body>
<div id="action_form">
    <form action="game/game.php" method="post">
        <label for="username">Логин:</label>
        <input name="username" id="username" type="text"><br/>
        <label for="password">Пароль:</label>
        <input name="password" id="password" type="password">
        <p><input type="submit" value="Войти"></p>
    </form>
</div>
</body>
</html>

CSS
1
2
3
4
5
6
7
8
body {
    margin:0;
}
 
#action_form {
    margin-top:50%;
    text-align:center;
}

Но вот что получается в результате. Что я делаю не так?

@kposs · 12.05.2016, 08:34

CSS
1
2
3
4
5
6
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  margin:auto;

А вообще очень классная вещь FLEX для позиционирования.

@Fedor92 · 12.05.2016, 10:52

Listed Illusion, можно использовать такой вариант:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
    html, body{width:100%; height:100%; margin:0}
    #action_form{
        position:absolute;
        width:200px;
        height:150px;
        left:50%;
        top:50%;
        margin-left:-100px;
        margin-top:-100px;
        border:1px solid
        
    }
    form{padding:14px}
    </style>
</head>
<body>
<div id="action_form">
    <form action="game/game.php" method="post">
        <label for="username">Логин:</label>
        <input name="username" id="username" type="text"><br/>
        <label for="password">Пароль:</label>
        <input name="password" id="password" type="password">
        <p><input type="submit" value="Войти"></p>
    </form>
</div>
</body>
</html>

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

А вообще очень классная вещь FLEX для позиционирования.

Flex вещь конечно хорошая, но пока не совсем кроссбраузерная, ie к сожалению пока целиком не поддерживает, данное удобство...

@kposs · 12.05.2016, 11:29

Fedor92,
Поддержка:

@Fedor92 · 12.05.2016, 11:57

kposs, всё верно, а теперь посмотрите на столбик с IE...

@Listed Illusion · 12.05.2016, 12:39 **[ТС]**

Спасибо всем!

P.S. был бы очень благодарен, если бы кто-нибудь в двух словах описал почему margin себя так странно ведет, и при высоте в 997 пикселей уводит блок вниз не на 498 а гораздо больше =)

@kposs · 12.05.2016, 12:45

Listed Illusion, мои предположения, что просто ты высоту в body не указываешь) В данном случае я даже хз от чего проценты считаются и считаются ли вообще... От размера окна, но как-то все это размыто...

@Fedor92 · 12.05.2016, 12:57

Сообщение от Listed Illusion

P.S. был бы очень благодарен, если бы кто-нибудь в двух словах описал почему margin себя так странно ведет, и при высоте в 997 пикселей уводит блок вниз не на 498 а гораздо больше =)

Приложите код(HTML+CSS), чтобы можно было ответить на Ваш вопрос...

@Listed Illusion · 12.05.2016, 13:53 **[ТС]**

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

Приложите код(HTML+CSS), чтобы можно было ответить на Ваш вопрос...

вот в том-то и дело что вверху топика весь код страницы(вместе со всем css), на ней пусто и ничего кроме формы для авторизации нету

@vnmslf · 12.05.2016, 14:47

Сообщение от Listed Illusion

P.S. был бы очень благодарен, если бы кто-нибудь в двух словах описал почему margin себя так странно ведет, и при высоте в 997 пикселей уводит блок вниз не на 498 а гораздо больше =)

Если это весь код, то я тоже ничего не понимаю.. Попробуйте указать

CSS
1
2
3
height: 100%;
margin: 0;
vertical-align: top;

- вам ведь нужно чтобы форма была вверху?

@Listed Illusion · 12.05.2016, 15:14 **[ТС]**

Если это весь код, то я тоже ничего не понимаю..

сначала пинал браузер - попробовал через другие глянуть и результат тот же
потом пинал систему - перезагрузился, а проблема осталась

туда же all:unset, но с ним маргин вообще почему-то перестал работать и ни в какую ничего никуда не хотел сдвигать

вам ведь нужно чтобы форма была вверху?

вертикально и горизонтально по середине страницы

P.S. ну да ладно, костылями так костылями

Вряд ли без поллитра тут разберешься что не так с этим маргином и почему. Всем большое спасибо!

@vnmslf · 12.05.2016, 15:59

Сообщение от Listed Illusion

вертикально и горизонтально по середине страницы

Попробуйте обернуть форму в div, которому дать:

CSS
1
2
3
position: relative;
top: calc (50% - x);
left: calc (50% - y);

Где x и y соответственно 1/2 от высоты и ширины вашего div блока, внутри которого живет форма. Не уверен, что это правильное решение, и уж тем более не единственное - но, думаю, что рабочее.

@Сергей8008 · 12.05.2016, 16:01

Вот держите:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="main.css" type="text/css" />
</head>
<body>
<div id="action_form" style="left: 50%;margin-left: -150px;position: absolute;width: 1000px;margin-top: 20%;">
    <form action="game/game.php" method="post">
        <label for="username">Логин:</label>
        <input name="username" id="username" type="text"><br/>
        <label for="password">Пароль:</label>
        <input name="password" id="password" type="password">
        <p><input type="submit" value="Войти"></p>
    </form>
</div>
</body>
</html>

@Listed Illusion · 14.05.2016, 13:47 **[ТС]**

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

@mostApi · 19.05.2017, 10:37

Listed Illusion, Fedor92, Сергей8008, vnmslf, можно ли это сделать без использования CSS? Только в HTML коде страницы?

HTML5
1
2
3
4
<Form action="" method="get" name="">
<label>Введите пароль: <input type="password" size="20"></label>
<input type="submit" name="submit1" value="OK">
</Form>

Добавлено через 8 минут
я так понимаю мне это все достаточно в Div заключить и все?

HTML5
1
2
3
4
5
6
<div align = "center">
<Form action="" method="get" name="">
<label>Введите пароль: <input type="password" size="20"></label>
<input type="submit" name="submit1" value="OK">
</Form>
</div>

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .	SDL3 для Web (WebAssembly): Работа со звуком через SDL3_mixer 8Observer8 08.02.2026 Содержание блога Пошагово создадим проект для загрузки звукового файла и воспроизведения звука с помощью библиотеки SDL3_mixer. Звук будет воспроизводиться по клику мышки по холсту на Desktop и по. . .	SDL3 для Web (WebAssembly): Основы отладки веб-приложений на SDL3 по USB и Wi-Fi, запущенных в браузере мобильных устройств 8Observer8 07.02.2026 Содержание блога Браузер Chrome имеет средства для отладки мобильных веб-приложений по USB. В этой пошаговой инструкции ограничимся работой с консолью. Вывод в консоль - это часть процесса. . .
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .

@kposs 38 / 37 / 29 Регистрация: 02.12.2013 Сообщений: 244
	12.05.2016, 11:29
	Fedor92, Поддержка: 0

@Fedor92 2964 / 2621 / 1068 Регистрация: 15.12.2012 Сообщений: 10,091 Записей в блоге: 11
	12.05.2016, 11:57
	kposs, всё верно, а теперь посмотрите на столбик с IE... 0

@Listed Illusion 3 / 3 / 2 Регистрация: 12.05.2016 Сообщений: 55
	12.05.2016, 12:39 [ТС]
	Спасибо всем! P.S. был бы очень благодарен, если бы кто-нибудь в двух словах описал почему margin себя так странно ведет, и при высоте в 997 пикселей уводит блок вниз не на 498 а гораздо больше =) 0

@kposs 38 / 37 / 29 Регистрация: 02.12.2013 Сообщений: 244
	12.05.2016, 12:45
	Listed Illusion, мои предположения, что просто ты высоту в body не указываешь) В данном случае я даже хз от чего проценты считаются и считаются ли вообще... От размера окна, но как-то все это размыто... 0

@Listed Illusion 3 / 3 / 2 Регистрация: 12.05.2016 Сообщений: 55
	14.05.2016, 13:47 [ТС]
	Все, понял (и тут нашел несколько тем, и на хабре статью о маргине где однозначный ответ был получен) почему маргин себя так ведет, он берет отступ не от верха страницы а ширины(зачем???) родительского элемента. ну все, теперь жить проще 0