I’ve been working on the personal portfolio page for what seems like (really is) weeks. Now that I’ve manage to put something together, the last bit is figuring out how to centre the html5 form I’ve included towards the bottom of the page.
I heard that align is deprecated and i’m not using bootstrap, I’d prefer to learn how to do it without ‘cheating’. Any ideas?
you can wrap it in a div and set width to auto set its margin to 0 auto like so:
<head>
<style>
div.with-a-form{
width:auto;
margin:0 auto;
}
</style>
<head>
<body>
<div class="with-a-form">
<form>
...
</form>
</div>
<body>
***But, if the “with-a-form” div is a child of another div, make sure that parent takes up 100%!
Thanks. For some reason, that’s not working either. No idea why.
I usually do something like margin-left and margin-top
with percentages to center it and it is responsive too
Put form inside a div. Assign a specific width (px, em, % whatever) to the div and apply a
margin-left: auto;
margin-right: auto;
or shortcut, if you know your top and bottom margin, 5px for example:
margin: 5px auto;
but the div should have a width!
Additional notes:
If you want it responsive, and you don’t want to use bootstrap, you’d need to do media queries, and assign specific div width depending on your display screen width.
@Deedeem, it would help if you gave us a link to your project or provided your code so we can see what you have. Anyway, there are several ways to go about this.
Depends on what you mean by align.
Not sure I would call using Bootstrap “cheating”, but you are right, it is good to learn how to do it yourself.
Your first step is to make sure your container is full width. After that, let’s look at several possibilites.
I. Flexbox
This one is pretty easy. In fact, centering anything with flexbox is easy, that’s why I mention this first. Create your container, and then make the form take up full width. You can then assign a width to the inputs.
<div class="container">
<form action="">
<input type="text">
<input type="text">
<textarea name="" id="" cols="30" rows="10"></textarea>
</form>
</div>
form {
width: 100%; /* make the form width of container */
display: flex;
flex-direction: column; /* make the form elements stack vertical instead of inline */
align-items: center; /* center the items horizontally */
}
input, textarea {
width: 40%; /* assign width to inputs and they will be centered inside the form */
}
You can also do this another way, where you assign the width to the form, make the inputs the full width of the form, and then use flexbox on the container.
.container {
height: 100vh;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
form {
width: 40%;
}
input, textarea {
width: 100%;
}
It all depends on which structure works best for your page. I would strongly suggest learning flexbox as it is almost always a guaranteed way to horizontally and/or vertically center any element.
II. Text Align Center
This is a somewhat hacky solution, but it works very well in certain instances and is pretty easy (unless you have to have several nested layers of centered elements).
This solution is extremely helpful when you don’t know the width of an element. display: inline-block shrinks the container to whatever dimensions the child elements are. That is incredibly useful, but it is also ridiculously simple to center–just put text-align on the parent:
.container {
height: 100vh;
width: 100%;
text-align: center;
}
form {
display: inline-block;
}
input, textarea {
width: 60%;
}
III. Margin Auto
@owel beat me to this, but I’ll provide an example anyway for the sake of a complete answer.
.container {
height: 100vh;
width: 100%;
text-align: center;
}
form {
width: 50%;
margin-left: auto;
margin-right: auto;
}
input, textarea {
width: 100%;
margin: 20px;
}
There are three simple ways to center practically anything. Margin auto is pretty simple, but doesn’t work all the time. Display inline-block is extremely useful if you don’t know the width of the form. Flexbox can be used to practically center anything, so it is an essential tool for every developer to know.
I tried that @destrotns but when I applied a margin to textarea, it messed things up even though the margins were the same 
I did add a div @owel but maybe I didn’t add a width so i’ll have to try again. It’s responsive though, even without media queries… something I wasn’t expecting.
Thank you @IsaacAbrahamson for your in-depth answer and examples. I don’t know why I didn’t think of flexbox because I’ve already used it a couple of times on the page. I’ll definitely have to try that tomorrow!
I know Bootstrap isn’t really cheating which is why I put the word in quotes but like you said, it’s better to learn how to do it other ways first.
Oh i thought you wanted to center the whole form inside its parent element. etc etc
I recently read at the MDN that all sorts of weird stuff happen when you try to apply some styles to
form elements. i think there are some solutions there which i didnt bother to read cause you know => bootstrap
https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Styling_HTML_forms
https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms
You can try reading these for more info.