Выравнивание формы по центру html

vertical align html form

I’m looking to center this textbox and submit button on the page both vertically and horizontally but the following code just puts it in the top center. How can I center this to the page? It’s like it’s ignoring the vertical-align setting.

You may read this article discussing recent css vertical centering thechniques: blog.themeforest.net/tutorials/vertical-centering-with-css

5 Answers 5

None of the solutions provided above worked for me for my real proyect in which I wanted to center both vertically and horizontally a form inside a div (not taking as reference the full page) but I got it using display: flex; property. Just display your parent div as flex and then use the property margin: auto; for your child form .

In your case, it would be like this:

html, body < height: 100%; width: 100%; margin: 0; >#centeringDiv < height: 100%; width: 100%; display: flex; >#mainForm

JSFiddle in which you can see that the form it is being centered both vertically and horizontally in the full page.

CSS will probably never stop to amaze me. Given Dhaval Marthak’s answer I was actually able to achieve what I wanted, right aligned labels and left aligned fields (on the right of the labels of course):

label < display: block; position:relative; text-align: right; width: 100px; margin: 0 0 5px 0; >label > input, label > select, input

The JSfiddle still points out my remaining problem, the field will align with the bottom of the label if the label breaks the line. But I am sure that can be amended as well.

Of course it would also be nice if the space between labels and fields could be assigned more «dynamically» based on the sizes of the labels (e.g. in different languages) but I have not seen this done anywhere so far. I guess I will have to resort to tables if I really need it.

Источник

How to center a HTML form in CSS

The best way to center a form horizontally in HTML and CSS is by using CSS flexbox. It is responsive and works well on mobile, tablet and desktop view.

Previously, we used to rely on methods that seemed like some CSS hacks. CSS flexbox came to solve such problems.

How to center a HTML form in a Div horizontally using CSS Flexbox

You need a form with it elements already created. For my case I will use.

  Email:  type="email" name="email" placeholder="Email">  type="submit">  

Wrap your form element in a div tag.

   Email:  type="email" name="email" placeholder="Email">  type="submit">   

Add a class to the div html tag that will be used to center the form.

 class="form-center">  Email:  type="email" name="email" placeholder="Email">  type="submit">   

Add the CSS flexbox to the class form-center.

.form-center  display:flex; justify-content: center; > 

Test your form. It should be centered. You can also check the results of centering using CSS flexbox.

Full Centered Form HTML CSS Flexbox Code

 class="form-center">  Email:  type="email" name="email" placeholder="Email">  type="submit">   

.form-center  display:flex; justify-content: center; > 

How to center a form horizontally using CSS margin

.form-center  width:400px; margin: 0 auto; > 

This was by far the most used method in centering block level elements like forms in HTML and CSS.

How to center a form horizontally using absolute CSS positioning

You wrap a div with a class of form-center around the form element.

 class="form-center">  Email:  type="email" name="email" placeholder="Email">  type="submit">   

You give the div tag relative positioning and set its width and height. You have to set the width and height, otherwise this will not work.

.form-center  position: relative; width:100%; height:10em; > 

Now you can add the CSS to position the form at the center of your container.

.form-center form  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); > 

Hi there! I am Avic Ndugu.

I have published 100+ blog posts on HTML, CSS, Javascript, React and other related topics. When I am not writing, I enjoy reading, hiking and listening to podcasts.

Front End Developer Newsletter

Receive a monthly Frontend Web Development newsletter.
Never any spam, easily unsubscribe any time.

Start understanding the whole web development field now

Stop all the confusion and start understanding how all the pieces of web development fit together.

Never any spam, easily unsubscribe any time.

About

If you are just starting out you can test the waters by attempting the project-based HTML tutorial for beginners that I made just for you.

Okay, you got me there, I made it because it was fun and I enjoy helping you on your learning journey as well.

You can also use the HTML and CSS projects list as a source of projects to build as you learn HTML, CSS and JavaScript.

Recent Posts

Источник

CSS : center form in page horizontally and vertically

How can i center the form called form_login horizontally and vertically in my page ? Here is the HTML I’m using right now:

8 Answers 8

Edit nowdays, grid is widely supported and if the form stands all alone in body, the code can be shortened.

or display:table http://codepen.io/anon/pen/LACnF/ (for a mail, use a table instead display)

Just to be clear, you can use flex on a block element containing the thing in question. If you do it to the body, it will flex the whole page. 🙂

If you want to do a horizontal centering, just put the form inside a DIV tag and apply align=»center» attribute to it. So even if the form width is changed, your centering will remain the same.

@G-Cyr is right. align=»center» attribute is now obsolete. You can use text-align attribute for this as following.

This will center all the content inside the parent DIV. An optional way is to use margin: auto CSS attribute with predefined widths and heights. Please follow the following thread for more information.

Vertical centering is little difficult than that. To do that, you can do the following stuff.

if you use a negative translateX/Y width and height are not necessary and the style is really short

Alternatively you could use display: grid (check the full page view)

The accepted answer didn’t work with my form, even when I stripped it down to the bare minimum and copied & pasted the code. If anyone else is having this problem, please give my solution a try. Basically, you set Top and Left to 50% as the OP did, but offset the form’s container with negative margins on the top and left equal to 50% of the div’s height and width, respectively. This moves the center point of the Top and Left coordinates to the center of the form. I will stress that the height and width of the form must be specified (not relative). In this example, a 300x300px form div with margins of -150px on the top and left is perfectly centered no matter the window size:

Now, for those wondering why I used a container for the form, it’s because I like to have the option of placing other elements in the form’s vicinity and having them centered as well. The form container is completely unnecessary in this example, but would definitely be useful in other cases. Hope this helps!

Источник

Как выровнять input по центру?

не получается выровнять по центру форму. Уже всё попробовал. Flex использовать не вариант. Так же не получается сделать кнопку по ширине input-ов или тоже разместить по центру.

form < display: block; background: #5B3C67; padding: 50px; width: 100%; color: white; margin-right: auto; margin-left: auto; >form input < text-align: center; padding: 10px; margin-bottom: 20px; //margin-left: 40%; width: 23%; height: 15px; border: 1px solid #ff8c00; >.button < width: 20%; font-size: 14pt; color: white; background: #7F113E; height: 55px; padding: 10px; border: 1px solid #F5C4AB; >.button:hover

3 ответа 3

не нужно добавлять у самих input-ов text-align:center, полезнее у родителя:

по поводу одинаковой ширины — определить у input и button

только еще у input добавить

чтобы padding не влияли на ширину

form < display: block; background: #5B3C67; padding: 50px; width: 100%; color: white; margin-right: auto; margin-left: auto; text-align: center; >form input < box-sizing: border-box; padding: 10px; margin-bottom: 20px; //margin-left: 40%; width: 25%; height: 35px; border: 1px solid #ff8c00; >.button < width: 25%; font-size: 14pt; color: white; background: #7F113E; height: 55px; padding: 10px; border: 1px solid #F5C4AB; >.button:hover

.center < display: flex; justify-content: center; margin: 0 auto; padding: 10px 20px; >form < background: #5B3C67; padding: 50px; color: white; margin-right: auto; margin-left: auto; width: 100%; display: flex; justify-content: center; align-items: center; flex-direction: column; >form input < text-align: center; padding: 10px; margin-bottom: 20px; //margin-left: 40%; width: 23%; height: 15px; border: 1px solid #ff8c00; width: 150px; >.button < width: 20%; font-size: 14pt; color: white; background: #7F113E; height: 55px; padding: 10px; border: 1px solid #F5C4AB; width: 200px; >.button:hover

Разобрался. Надо было добавить:

Похожие

Подписаться на ленту

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.7.24.43543

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Источник