Centering with tableHTML:<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 transformHTML:<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 flexboxHTML:<div class="cn"><div class="inner">your content</div></div>CSS:.cn {display: flex;justify-content: center;align-items: center;}Centering with gridHTML:<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;}
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
<div class="cn"><div class="inner">your content</div></div>
position: relative;
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%,-50%);
width: 200px;
height: 200px;
Centering with flexbox
display: flex;
justify-content: center;
align-items: center;
Centering with grid
<div class=”wrap_grid”>
<div id=”container”>vertical aligned text<br />some more text here
</div>
.wrap-grid {
display: grid;
place-content: center;