Posted in
3109
8:50 am, November 22, 2021
How to Center or Centre everything in a Container
Traditionally it has been quite tricky the vertically and horizontally center an item in a container or div element.
This has been made quite a bit more straight forward with the grid
layout and the place-items
setting.
How can i use it?
You will need to have an item within a parent element to apply the place-items setting. Also you will need to apply the grid layout to this element.
You can see how to use it in the following example:
How to Center or Centre everything in a Container Demo
View Demo Full Screen View Demo New Tab
How to Center or Centre everything in a Container Code
HTML
<div class="parent pink-bg" >
<div class="box black-bg white-fg" contenteditable>
😀 ...
</div>
</div>
CSS
.parent {
display: grid;
place-items: center;
width:100%;
height:500px;
border-radius:3px;
}
.pink-bg {
background:pink;
}
.black-bg {
padding:10px;
border-radius:3px;
background:#000;
}
.white-fg {
color:#FFF;
}
Related Tags
Add Comment
Other Items in CSS
Related Search Terms
Other Categories in Code
404 pages animation animations background effects boxes buttons css css & javascript css animation css animations css backgrounds css cursors css framework css frameworks css modal css positions css reset css shadows css slider css text effects css text formatting css tips css tools css z-index content slider cookie alerts design html css sections html canvas html sections icons image zoom interactive images lightbox link effects loading animation modals mouse effects navigation notifications parallax profiles quick css seo sections text ui web developer checklists animations backgrounds bootstrap buttons css css animated css animations css framework css grid footers forms html image effects images javascript scroll effects sections show your work svg text animation timeline
css animations
css animations
HTML Canvas
javascript