Centering depends on the box and its layout context. Start with normal-flow techniques; use positioned centering when you actually need an overlay.
Version and setup
These examples are compiled with Tailwind CSS 3.3.2. Copy document includes the required CSS, so that document runs without a Tailwind installation. To use the utility classes in a project, follow the versioned setup guide.
This site customizes its spacing scale: p-10 is 10px here, while standard Tailwind 3 uses 2.5rem. The examples below use unaffected spacing keys or explicit arbitrary values. Check your project configuration before assuming a utility’s size. Tailwind 4 has a different setup; use its official installation guide for a new version-4 project.
Auto margins
Tailwind CSS 3.3.2; the CSS tab includes the compiled styles.
HTML
<div class="w-3/4 max-w-md mx-auto p-4 border border-blue-700">
Auto margins divide the remaining horizontal space.
</div>CSS
*,
::before,
::after {
box-sizing: border-box;
border: 0 solid #e5e7eb;
}
h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote,
dl,
dd {
margin: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: inherit;
font-weight: inherit;
}
button,
input,
select,
textarea {
font: inherit;
color: inherit;
}
button {
background: none;
}
img,
svg,
video {
display: block;
max-width: 100%;
}
img,
video {
height: auto;
}
a {
color: inherit;
text-decoration: inherit;
}
ol,
ul,
menu {
list-style: none;
margin: 0;
padding: 0;
}
.mx-auto {
margin-left: auto;
margin-right: auto;
}
.w-3\/4 {
width: 75%;
}
.max-w-md {
max-width: 28rem;
}
.border {
border-width: 1px;
}
.border-blue-700 {
--tw-border-opacity: 1;
border-color: rgb(29 78 216 / var(--tw-border-opacity));
}
.p-4 {
padding: 1rem;
}Edit HTML or CSS to update the preview as you type. Copy code snippet copies the selected tab. Preview spacing and font defaults are not included.
A block that fills its container has no leftover space to divide. A percentage or maximum width is enough; a fixed pixel width is not required.
Flexbox
Tailwind CSS 3.3.2; the CSS tab includes the compiled styles.
HTML
<div class="flex items-center justify-center min-h-[12rem] bg-blue-100">
<p class="p-4">Centered flex item</p>
</div>CSS
*,
::before,
::after {
box-sizing: border-box;
border: 0 solid #e5e7eb;
}
h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote,
dl,
dd {
margin: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: inherit;
font-weight: inherit;
}
button,
input,
select,
textarea {
font: inherit;
color: inherit;
}
button {
background: none;
}
img,
svg,
video {
display: block;
max-width: 100%;
}
img,
video {
height: auto;
}
a {
color: inherit;
text-decoration: inherit;
}
ol,
ul,
menu {
list-style: none;
margin: 0;
padding: 0;
}
.flex {
display: flex;
}
.min-h-\[12rem\] {
min-height: 12rem;
}
.items-center {
align-items: center;
}
.justify-center {
justify-content: center;
}
.bg-blue-100 {
--tw-bg-opacity: 1;
background-color: rgb(219 234 254 / var(--tw-bg-opacity));
}
.p-4 {
padding: 1rem;
}Edit HTML or CSS to update the preview as you type. Copy code snippet copies the selected tab. Preview spacing and font defaults are not included.
items-center aligns the cross axis and justify-center aligns the main axis. The default row direction makes those vertical and horizontal here. The minimum height creates vertical space.
Grid
Tailwind CSS 3.3.2; the CSS tab includes the compiled styles.
HTML
<div class="grid min-h-[12rem] place-items-center bg-blue-100">
<p class="p-4">Centered grid item</p>
</div>CSS
*,
::before,
::after {
box-sizing: border-box;
border: 0 solid #e5e7eb;
}
h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote,
dl,
dd {
margin: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: inherit;
font-weight: inherit;
}
button,
input,
select,
textarea {
font: inherit;
color: inherit;
}
button {
background: none;
}
img,
svg,
video {
display: block;
max-width: 100%;
}
img,
video {
height: auto;
}
a {
color: inherit;
text-decoration: inherit;
}
ol,
ul,
menu {
list-style: none;
margin: 0;
padding: 0;
}
.grid {
display: grid;
}
.min-h-\[12rem\] {
min-height: 12rem;
}
.place-items-center {
place-items: center;
}
.bg-blue-100 {
--tw-bg-opacity: 1;
background-color: rgb(219 234 254 / var(--tw-bg-opacity));
}
.p-4 {
padding: 1rem;
}Edit HTML or CSS to update the preview as you type. Copy code snippet copies the selected tab. Preview spacing and font defaults are not included.
place-items-center sets both item alignment axes.
Position and translation
Tailwind CSS 3.3.2; the CSS tab includes the compiled styles.
HTML
<div class="relative h-48 border border-blue-700">
<p
class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-3/4 p-4 text-center bg-blue-100"
>
Position uses the parent; translation uses this box.
</p>
</div>CSS
*,
::before,
::after {
box-sizing: border-box;
border: 0 solid #e5e7eb;
}
h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote,
dl,
dd {
margin: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: inherit;
font-weight: inherit;
}
button,
input,
select,
textarea {
font: inherit;
color: inherit;
}
button {
background: none;
}
img,
svg,
video {
display: block;
max-width: 100%;
}
img,
video {
height: auto;
}
a {
color: inherit;
text-decoration: inherit;
}
ol,
ul,
menu {
list-style: none;
margin: 0;
padding: 0;
}
*,
::before,
::after {
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
}
::backdrop {
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
}
.absolute {
position: absolute;
}
.relative {
position: relative;
}
.left-1\/2 {
left: 50%;
}
.top-1\/2 {
top: 50%;
}
.h-48 {
height: 12rem;
}
.w-3\/4 {
width: 75%;
}
.-translate-x-1\/2 {
--tw-translate-x: -50%;
transform: translate(var(--tw-translate-x), var(--tw-translate-y))
rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-translate-y-1\/2 {
--tw-translate-y: -50%;
transform: translate(var(--tw-translate-x), var(--tw-translate-y))
rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.border {
border-width: 1px;
}
.border-blue-700 {
--tw-border-opacity: 1;
border-color: rgb(29 78 216 / var(--tw-border-opacity));
}
.bg-blue-100 {
--tw-bg-opacity: 1;
background-color: rgb(219 234 254 / var(--tw-bg-opacity));
}
.p-4 {
padding: 1rem;
}
.text-center {
text-align: center;
}Edit HTML or CSS to update the preview as you type. Copy code snippet copies the selected tab. Preview spacing and font defaults are not included.
The parent supplies a containing block and height. The absolute child contributes no height to normal flow. A containing block may have other in-flow content, so it does not always collapse to zero.
Insets and auto margins
Tailwind CSS 3.3.2; the CSS tab includes the compiled styles.
HTML
<div class="relative h-48 border border-blue-700">
<div
class="absolute inset-0 w-16 h-16 m-auto bg-blue-700"
aria-label="Centered blue square"
></div>
</div>CSS
*,
::before,
::after {
box-sizing: border-box;
border: 0 solid #e5e7eb;
}
h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote,
dl,
dd {
margin: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: inherit;
font-weight: inherit;
}
button,
input,
select,
textarea {
font: inherit;
color: inherit;
}
button {
background: none;
}
img,
svg,
video {
display: block;
max-width: 100%;
}
img,
video {
height: auto;
}
a {
color: inherit;
text-decoration: inherit;
}
ol,
ul,
menu {
list-style: none;
margin: 0;
padding: 0;
}
.absolute {
position: absolute;
}
.relative {
position: relative;
}
.inset-0 {
inset: 0px;
}
.m-auto {
margin: auto;
}
.h-16 {
height: 4rem;
}
.h-48 {
height: 12rem;
}
.w-16 {
width: 4rem;
}
.border {
border-width: 1px;
}
.border-blue-700 {
--tw-border-opacity: 1;
border-color: rgb(29 78 216 / var(--tw-border-opacity));
}
.bg-blue-700 {
--tw-bg-opacity: 1;
background-color: rgb(29 78 216 / var(--tw-bg-opacity));
}Edit HTML or CSS to update the preview as you type. Copy code snippet copies the selected tab. Preview spacing and font defaults are not included.
Opposite insets and auto margins center the explicitly sized box. Insets alone would stretch an auto-sized box. Learn the underlying horizontal and vertical alignment rules before selecting utilities.
Sources
Reference 1 Reference 2 Reference 3 Reference 4 Reference 5 provide the technical details and current compatibility information.