+1 vote
in CSS by
How to center align a div inside another div?

1 Answer

0 votes
by

Centering with table

HTML:

<div class=”cn”><div class=”inner”>your content</div></div>

CSS:

.cn {

display: table-cell;

width: 500px;

height: 500px;

vertical-align: middle;

text-align: center;

}

.inner {

display: inline-block;

width: 200px; height: 200px;

}

Centering with transform

HTML:

<div class="cn"><div class="inner">your content</div></div>

CSS:

.cn {

position: relative;

width: 500px;

height: 500px;

}

.inner {

position: absolute;

top: 50%; left: 50%;

transform: translate(-50%,-50%);

width: 200px;

height: 200px;

}

Centering with flexbox

HTML:

<div class="cn"><div class="inner">your content</div></div>

CSS:

.cn {

display: flex;

justify-content: center;

align-items: center;

}

Centering with grid

HTML:

<div class=”wrap_grid”>

<div id=”container”>vertical aligned text<br />some more text here

</div>

</div>

CSS:

.wrap-grid {

display: grid;

place-content: center;

}

Related questions

+1 vote
asked Jun 1, 2020 in Bootstrap by SakshiSharma
0 votes
asked Sep 6, 2023 in HTML by Robindeniel
...