Center div horizontally and vertically

tillnoah · Sep 20, 2023

How can I center a div in the middle of the website so that it is centered horizontally & vertically?

Saul H. · Sep 20, 2023

Assign particular margin characteristics!

Code:

<style>
Assign margin:auto to assigned div name.
</style>

VBService · Sep 21, 2023

For

HTML:

<body>
    <div>Hello World</div>
</body>

[ on-line ]

CSS:

div {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: transform(-50%, -50%);
}

[ on-line ]

CSS:

body {
    display: grid;
    place-items: center;
}

[ on-line ]

CSS:

body {
    display: flex;
    justify-content: center;
    align-items: center;
}

[ on-line ]

CSS:

body {
    display: flex;    
    align-items: center;
}
div {
    /*margin: 0 auto;*/
    margin-inline: auto;
}

[ on-line ]

CSS:

body {
    display: table;
    width: 100%;
    height: 100%;
}
div {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

[ on-line ]

CSS:

div {
    text-align: center;
    width: 100%;
    height: 100%;
    font-size: 1.5rem;
    line-height: 100vh;
}

[ on-line ]

CSS:

body {
    /*display: flex;*/
    display: grid;
}
div {
    margin: auto;
}

BigDady · Sep 21, 2023

Of all the great responses that VB gave you, the one I have used 100% of the time is
body {
display: flex;
justify-content: center;
align-items: center;
}

Different font sizes inside same div	2	Dec 3, 2023
<div> help	1	Mar 4, 2024
How to use PDF-lib and how to center each line of texts on the page?	1	Aug 16, 2023
Clickable Div Block	1	Oct 13, 2023
How to show data horizontally not vertically in rdlc	0	Mar 9, 2017
Put picture on the right side of the page?	1	Feb 3, 2023
2D computing: fitting shape within bigger shapes efficiently	4	Sep 5, 2024
Vertical Align a <DIV>	1	Oct 19, 2011

Center div horizontally and vertically

tillnoah

Saul H.

VBService

BigDady

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads