Artwork

Front-End Web Daily에서 제공하는 콘텐츠입니다. 에피소드, 그래픽, 팟캐스트 설명을 포함한 모든 팟캐스트 콘텐츠는 Front-End Web Daily 또는 해당 팟캐스트 플랫폼 파트너가 직접 업로드하고 제공합니다. 누군가가 귀하의 허락 없이 귀하의 저작물을 사용하고 있다고 생각되는 경우 여기에 설명된 절차를 따르실 수 있습니다 https://ko.player.fm/legal.
Player FM -팟 캐스트 앱
Player FM 앱으로 오프라인으로 전환하세요!

Tuesday Tips | The Modern Way to Center Content in CSS

2:32
 
공유
 

Manage episode 313190380 series 3261464
Front-End Web Daily에서 제공하는 콘텐츠입니다. 에피소드, 그래픽, 팟캐스트 설명을 포함한 모든 팟캐스트 콘텐츠는 Front-End Web Daily 또는 해당 팟캐스트 플랫폼 파트너가 직접 업로드하고 제공합니다. 누군가가 귀하의 허락 없이 귀하의 저작물을 사용하고 있다고 생각되는 경우 여기에 설명된 절차를 따르실 수 있습니다 https://ko.player.fm/legal.

Today is December 8, 2020, and for this Tuesday Tips episode we're covering The Modern Way to Center Content in CSS

Let's dive in!

----

For many years the bane of any web designer's existence was something simple: centering an object on the page. Horizontally centering was one thing, but getting an item to vertically center was a whole different monster. Even worse was both vertically and horizontally centering an element. However, modern CSS stylings have made this a snap with just a few lines of code. Gone are the days of absolute positioning an element 50% of the top and left of its container and bumping it back negative 50% with a transform. Now we can use Flexbox or CSS Grid to quickly center the element and move on.

----

Flexbox makes it very easy to align items in the center of the container with just three lines of CSS. Just set the display to flex and center the items horizontally (justify-content: center) and vertically (align-items: center).

.container {
display: flex;
justify-content: center;
align-items: center;
}

Now all items originate from the center of the container!

It is important to note that if you change to flex-direction: column the properties have the opposite effect: justify-content becomes the vertical axis and align-items becomes the horizontal. Think of it as rotating the container element's axes.

----

Meanwhile, CSS Grid makes it even easier by only needing place-items: center to center elements in the grid. Just set the display to grid, place the items, and you're off to the races.

.container {
display: grid;
place-items: center;
}

If you want to control the individual axes you can use the same properties as we did with Flexbox instead, justify-content for the horizontal axis and align-items for the vertical.

.container {
display: grid;
justify-content: center;
align-items: center;
}

Never get tripped up with centering an element on your website again. Whether you are using Flexbox or CSS Grid add a couple lines of code and move on to something more deserving of your skill and attention.

----

Today’s Tuesday Tips was adapted from a series of posts on Daily Dev Tips.

----

Want to know more? Head to fewdaily.com for more of today’s topics and other front-end web content! If you liked what you heard be sure to rate, review, and subscribe on your platform of choice. That's all for today, tune in tomorrow!

  continue reading

37 에피소드

Artwork
icon공유
 
Manage episode 313190380 series 3261464
Front-End Web Daily에서 제공하는 콘텐츠입니다. 에피소드, 그래픽, 팟캐스트 설명을 포함한 모든 팟캐스트 콘텐츠는 Front-End Web Daily 또는 해당 팟캐스트 플랫폼 파트너가 직접 업로드하고 제공합니다. 누군가가 귀하의 허락 없이 귀하의 저작물을 사용하고 있다고 생각되는 경우 여기에 설명된 절차를 따르실 수 있습니다 https://ko.player.fm/legal.

Today is December 8, 2020, and for this Tuesday Tips episode we're covering The Modern Way to Center Content in CSS

Let's dive in!

----

For many years the bane of any web designer's existence was something simple: centering an object on the page. Horizontally centering was one thing, but getting an item to vertically center was a whole different monster. Even worse was both vertically and horizontally centering an element. However, modern CSS stylings have made this a snap with just a few lines of code. Gone are the days of absolute positioning an element 50% of the top and left of its container and bumping it back negative 50% with a transform. Now we can use Flexbox or CSS Grid to quickly center the element and move on.

----

Flexbox makes it very easy to align items in the center of the container with just three lines of CSS. Just set the display to flex and center the items horizontally (justify-content: center) and vertically (align-items: center).

.container {
display: flex;
justify-content: center;
align-items: center;
}

Now all items originate from the center of the container!

It is important to note that if you change to flex-direction: column the properties have the opposite effect: justify-content becomes the vertical axis and align-items becomes the horizontal. Think of it as rotating the container element's axes.

----

Meanwhile, CSS Grid makes it even easier by only needing place-items: center to center elements in the grid. Just set the display to grid, place the items, and you're off to the races.

.container {
display: grid;
place-items: center;
}

If you want to control the individual axes you can use the same properties as we did with Flexbox instead, justify-content for the horizontal axis and align-items for the vertical.

.container {
display: grid;
justify-content: center;
align-items: center;
}

Never get tripped up with centering an element on your website again. Whether you are using Flexbox or CSS Grid add a couple lines of code and move on to something more deserving of your skill and attention.

----

Today’s Tuesday Tips was adapted from a series of posts on Daily Dev Tips.

----

Want to know more? Head to fewdaily.com for more of today’s topics and other front-end web content! If you liked what you heard be sure to rate, review, and subscribe on your platform of choice. That's all for today, tune in tomorrow!

  continue reading

37 에피소드

모든 에피소드

×
 
Loading …

플레이어 FM에 오신것을 환영합니다!

플레이어 FM은 웹에서 고품질 팟캐스트를 검색하여 지금 바로 즐길 수 있도록 합니다. 최고의 팟캐스트 앱이며 Android, iPhone 및 웹에서도 작동합니다. 장치 간 구독 동기화를 위해 가입하세요.

 

빠른 참조 가이드