Quickest Five Way to Center Div with CSS
In this tutorial, we’ll be learning how to Center div with CSS :)
Before we start we should know first know about the CSS and terms which we are going to use to provide a solution.
CSS
CSS stands for Cascading Style Sheets
It allows us to create rules that specify how the content of an element should appear
It makes your web pages more attractive
It also control the design of element using with css.
a) CSS flexbox
It allows you to design a flexible responsive layout structure without using any float or positioning property of CSS
b) Positions :
The
position -CSS property sets how an element is positioned in a document. If you want to learn more please go to below link https://developer.mozilla.org/en-US/docs/Web/CSS/position
There are seven different position values:
CSS syntax
position: static|absolute|fixed|relative|sticky|initial|inherit;
c) CSS Grid Layout
CSS Grid Layout excels at dividing a page into major regions or defining the relationship in terms of size, position, and layer, between parts of a control built from HTML primitives.
CSS Grid Layout is a two-dimensional layout system for the web
Grid- A grid is a collection of horizontal and vertical lines creating a pattern against which we can line up our design elements
If you want to learn more please go to below link
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout
d). CSS display :
The
displayproperty specifies the display behavior (the type of rendering box) of an element.
Getting Started
- Open the any editor (visual studio code , sublime , notepad++) etc
- Create index.html and style.css
- Open the index.html and add below code
4. create folder css/style.css
5. And link css/style.css into your index.html file. Make sure the css should add into head tag .
for example
Let’s start with our first method
Method 1 — Center with Position
a) Open the index.html file and add below html code in the body tag
Center with Position approach
I am center
b) open the style.css and add below code
i) First we will add some generic css for all div’s (where we will add border , margin, background colour and height)
ii) We will also remove the default p tag margin to 0 .
Generic css
div {
height: 80px;
margin: 0px;
color: #000;
border: 1px solid #000;
background-color: #c2f2cf;
}
p {
margin: 0; /* remove default margins */
}
iii) Magic Code with position only
To Center the div with position, we will add position to parent div and as well child div
Parent div will have position only — relative and child will have position absolute , left, top and transform
/* Position approach */
.absolute {
position: relative;
}
.absolute p {
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
left: 50%;
}
Method 2 — Center with Table
a) Open the index.html file and add below html code in the body tag
Center with Table approach
I am center
b) open the style.css and add below code
/* Display Table */
.table {
display: table;
width: 100%;
}
.table p {
display: table-cell;
vertical-align: middle;
text-align: center;
}
Method 3— Center with Flexbox
a) Open the index.html file and add below html code in the body tag
Center with Flexbox approach
I am center
b) open the style.css and add below code
.flexbox {
display: flex;
align-items: center;
justify-content: center;
}
Method 4— Center with Grid
a) Open the index.html file and add below html code in the body tag
b) open the style.css and add below code
.grid {
display: grid;
place-content: center;
}
or
.grid{
display:grid;
align-items:center;
justify-content: center;
}
Method 5— Center with Grid with margins
a) Open the index.html file and add below html code in the body tag
b) open the style.css and add below code
/* flexbox with margin approach*/
.marginsgrid {
display: flex;
}
.marginsgrid p {
margin: auto;
}
Github links to download code —
Conclusion:
This is the medium story of Quickest Five Way to Center Div with CSS if you have any doubts, please mail me on [email protected]
Follow me on the below articles :
Happy learning :)
