xxxxxxxxxx
<div class="center">this content will be in the horizontally centered of your page</div>
<style>
/** this is the css to center a DIV or any element **/
.center {
display: table;
margin: 0 auto;
}
</style>
xxxxxxxxxx
.row {
width: 100%;
display: flex;
flex-direction: row;
justify-content: center;
}
.block {
width: 100px;
}
xxxxxxxxxx
/* margin auto does the magic, make sure to provide width less than 100% */
.center {
margin: auto;
width: 400px;
}
.center {
margin: auto;
width: 50%;
}
xxxxxxxxxx
/* this works most of the time for
divs that aren't fixed or absolute */
.center{
margin-left: auto;
margin-right: auto;
}/* note "margin: auto;" will center both horizontally and vertically,
(can't wait for a css version that adds "margin-x", im picky about the wrong things) */
xxxxxxxxxx
<style>
.center-role-form {
width: fit-content;
text-align: center;
margin: 1em auto;
display: table;
}
</style>
<div class="center-role-form">
<!--your div (contrent) place here-->
</div>
xxxxxxxxxx
You can apply this CSS to the inner <div>:
#inner {
width: 50%;
margin: 0 auto;
}
Of course, you don't have to set the width to 50%. Any width less than the containing <div> will work. The margin: 0 auto is what does the actual centering.
If you are targeting Internet Explorer 8 (and later), it might be better to have this instead:
#inner {
display: table;
margin: 0 auto;
}
It will make the inner element center horizontally and it works without setting a specific width.
Working example here:
#inner {
display: table;
margin: 0 auto;
border: 1px solid black;
}
#outer {
border: 1px solid red;
width:100%
}
<div id="outer">
<div id="inner">Foo foo</div>
</div>
xxxxxxxxxx
.row {
width: 100%;
text-align: center; // center the content of the container
}
.block {
width: 100px;
display: inline-block; // display inline with ability to provide width/height
}•
xxxxxxxxxx
#inner {
display: table;
margin: 0 auto;
border: 1px solid black;
}
#outer {
border: 1px solid red;
width:100%
}
<-- Html -->
<div id="outer">
<div id="inner">Foo foo</div>
</div>
xxxxxxxxxx
You can apply this CSS to the inner <div>:
#inner { width: 50%; margin: 0 auto; }
Of course, you don't have to set the width to 50%. Any width less than the containing <div> will work. The margin: 0 auto is what does the actual centering.
If you are targeting Internet Explorer 8 (and later), it might be better to have this instead:
#inner { display: table; margin: 0 auto; }
It will make the inner element center horizontally and it works without setting a specific width.
Working example here:
#inner { display: table; margin: 0 auto; border: 1px solid black; } #outer { border: 1px solid red; width:100% }
<div id="outer"> <div id="inner">Foo foo</div> </div>
EDIT
With flexbox it is very easy to style the div horizontally and vertically centered.
#inner { border: 1px solid black; } #outer { border: 1px solid red; width:100%; display: flex; justify-content: center; }
<div id="outer"> <div id="inner">Foo foo</div> </div>
To align the div vertically centered, use the property align-items: center.