Html center login form

How do I center this form in css?

I have tried everything. I cannot get this centered on the screen. I am using ie 9 but it does the same in chrome. It just sits on the left of the webpage. Thank you for any help.

 body < margin:50px 0px; padding:0px; text-align:center; align:center; >label,input < display: block; width: 150px; float: left; margin-bottom: 10px; >label < text-align: right; width: 75px; padding-right: 20px; >br  
Name  
Address  
City  
 
  

16 Answers 16

I’m late, but you can wrap the form in a div and move text-align: center; to that parent div to have the entire form centered, not just the contents.

1. Wrap your form in a div.
2. Set the div’s display to block and text-align to center (this will center the contained form).
3. Set the form’s display to inline-block (auto-sizes to content), left and right margins to auto (centers it horizontally), and text-align to left (or else its children will be center-aligned too).

body < text-align: center; >/* center all items within body, this property is inherited */ body > * < text-align: left; >/* left-align the CONTENTS all items within body, additionally you can add this text-align: left property to all elements manually */ form < display: inline-block; >/* reduces the width of the form to only what is necessary */ 

Works & tested in Chrome/IE/FF

that will only move the form from the left by 25%.. unless the form is very wide, it will never be affected by margin-right: 25%, and width: 100% is default

Try adding this to your css

and add width:100% to the body tag

Sorry 985px would be the form width. That was just an example. You can change that width to whatever you like 🙂

Just make sure you have a defined width. The auto margins used to center will only work with a defined width in there.

hardcoding widths is a dieing trend, you can just do display: inline-block; on the form itself, then center-align that

I have never known it to be a «dieing trend». I would call it a realiable trend, it works on all browsers and has done for years. With your suggestion you need to continuously set your text-align back to left for other elements which is more hassle

Источник

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!

Источник

Center the login form in the middle of the screen with bootstrap

I am trying to get my login form in the middle of the screen and the company logo on the right above. In the picture this is what I want to make in bootstrap. This is my HTML code:

 
 
.col-sm-3
 
 
 
 
Sign In
 
Forgot password? 
 
 
 
 
  
 
 

I already try this website but no luck https://css-tricks.com/centering-css-complete-guide/ How can I center the login form in the middle of the screen and the company logo on the right above side of the screen? Kind regards UPDATE: jsfiddle https://jsfiddle.net/fok6f2fc/

You have a few unclosed div tags there, and I don’t see the logo — or any of your CSS, we’ll need a MVCE (Minimal, Complete, and Verifiable example) to work with. stackoverflow.com/help/mcve

See the CSS of www.ourthing.eu by pressing F12, perhaps you can find the answer inside there. The website uses bootstrap 3.

2 Answers 2

Would something like this match your needs? Login box centered horizontally and vertically with 100% height columns. Best viewed here on CodePen.

html,body,.container < height: 100%; >#login-box < display: table; height: 100%; >.container < display: table; width: 100%; padding: 0; box-sizing: border-box; >.row < height: 100%; display: table-row; >.row .no-float < display: table-cell; float: none; vertical-align: top; >.new

  
 
 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus dui augue, sollicitudin et tortor sodales, mollis luctus massa. Praesent non tincidunt neque. Pellentesque facilisis maximus risus, ut porta risus vulputate in. Aliquam erat volutpat. Ut neque mi, tincidunt accumsan diam sed, vehicula vulputate ante. Morbi congue purus nulla, a sodales mi pellentesque id. Vestibulum tempor diam cursus nunc convallis, ac vehicula ipsum faucibus. Aenean malesuada pretium est, id laoreet diam aliquam porta. Aenean elementum pharetra leo id consequat. Pellentesque nec odio leo. Donec luctus nibh orci, sit amet malesuada risus suscipit eget. Maecenas aliquet odio nec vulputate vestibulum. Fusce tincidunt enim a mauris ornare, id iaculis nunc luctus. Donec placerat ex in lorem semper faucibus. Praesent ut tempus erat.
 
 
 
 
Sign In
 
Forgot password?
 
 
 
 
 
 
 
Login 
 
  
 
 
 
 
 
  
 
 
 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus dui augue, sollicitudin et tortor sodales, mollis luctus massa. Praesent non tincidunt neque. Pellentesque facilisis maximus risus, ut porta risus vulputate in. Aliquam erat volutpat. Ut neque mi, tincidunt accumsan diam sed, vehicula vulputate ante. Morbi congue purus nulla, a sodales mi pellentesque id. Vestibulum tempor diam cursus nunc convallis, ac vehicula ipsum faucibus. Aenean malesuada pretium est, id laoreet diam aliquam porta. Aenean elementum pharetra leo id consequat. Pellentesque nec odio leo. Donec luctus nibh orci, sit amet malesuada risus suscipit eget. Maecenas aliquet odio nec vulputate vestibulum. Fusce tincidunt enim a mauris ornare, id iaculis nunc luctus. Donec placerat ex in lorem semper faucibus. Praesent ut tempus erat.
 
 
 
 

Источник