10 Different ways to center a divβ‘
A Thread π§΅β
A Thread π§΅β
π In this thread, we are going to see the 10 different ways to center a div but before jumping into the thread I like to share the meaning of "align" and "justify" words in CSS.
π align = vertical direction
π justify = horizontal direction
π align = vertical direction
π justify = horizontal direction
1οΈβ£ Grid:
π‘align-self: It is applied on the grid item/child that is used to control the alignment vertically.
π‘justify-self: It is also applied to the grid item that controls the alignment to the row axis.
π‘align-self: It is applied on the grid item/child that is used to control the alignment vertically.
π‘justify-self: It is also applied to the grid item that controls the alignment to the row axis.
2οΈβ£ Grid:
π‘ place-items: It is used to align the elements in horizontal and vertical directions.
π‘ place-items: It is used to align the elements in horizontal and vertical directions.
3οΈβ£ Grid:
π‘ justify-content: It controls the elements in the horizontal direction.
π‘ align-items: It controls the elements in the vertical direction.
π‘ justify-content: It controls the elements in the horizontal direction.
π‘ align-items: It controls the elements in the vertical direction.
4οΈβ£ Grid:
π‘ place-self: It allows you to align an individual item in both the horizontal and vertical directions.
π‘ place-self: It allows you to align an individual item in both the horizontal and vertical directions.
5οΈβ£ Grid:
π‘ margin(auto): It automatically aligns the item center of the container.
π‘ margin(auto): It automatically aligns the item center of the container.
6οΈβ£ Flex:
π‘ align-items: It is used to vertically control items in a container.
π‘ justify-content: It is used to horizontally control items in a container.
π‘ align-items: It is used to vertically control items in a container.
π‘ justify-content: It is used to horizontally control items in a container.
7οΈβ£ Flex:
π‘ margin(auto): It automatically aligns the item center of the container.
π‘ margin(auto): It automatically aligns the item center of the container.
8οΈβ£ Flex:
π‘ justify-content: It is used to horizontally control items in a container.
π‘ align-self: It is applied on the individual grid item that is used to control the alignment vertically.
π‘ justify-content: It is used to horizontally control items in a container.
π‘ align-self: It is applied on the individual grid item that is used to control the alignment vertically.
9οΈβ£ Position:
π‘ inset: It is shorthand for top, right, bottom, and left.
π‘margin(auto): It automatically aligns the item center of the container.
π‘ inset: It is shorthand for top, right, bottom, and left.
π‘margin(auto): It automatically aligns the item center of the container.
π Position:
π‘ Learn it from this thread β
π‘ Learn it from this thread β
π Codepen link:
codepen.io
codepen.io
That's all for now, we will meet in the next threadπ
π Follow Me @ATechAjay
For:
π Web Development
β¨ JavaScript
π Writing Skill
π₯ Motivation
πΉ Growth
β But Not For Only Resources & Shitpost π
Thank you so much for staying to the end of this threadπ
π Follow Me @ATechAjay
For:
π Web Development
β¨ JavaScript
π Writing Skill
π₯ Motivation
πΉ Growth
β But Not For Only Resources & Shitpost π
Thank you so much for staying to the end of this threadπ
Loading suggestions...