div 내의 수직 수평 중앙 정렬

비타주리

· 4년 전 · 조회 4906 4906 · 댓글 19 19

div 로 무엇을 만들 때 수직 수평 중앙 정렬이 안 되어서 늘 테이블을 그리워 했던 기억들을 누구나 가지고 있었을 것입니다.

display:flex 를 사용하여 쉽게 정렬할 수 있습니다. div 안의 내용이 그 무엇이라도 상관이 없습니다.

justify-content : 테이블에서 align 처럼
flex-start : 좌측
flex-end : 우측
center : 중앙

align-items : 테이블에서 valign 처럼
flex-start : 상단
flex-end : 하단
center : 중앙

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

댓글 19개

써맨

번호	분류	제목	글쓴이	날짜	조회
977	CSS	수직 탐색 막대 예제	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1661
976	CSS	Vertical Navigation Bar [1]	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2117
975	CSS	Navigation Bars	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1610
974	CSS	[CSS] Float : left, right, inherit, none.	이희현 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	5248
973	CSS	CSS 투명한 호버 효과 2	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	3247
972	CSS	CSS 투명한 호버 효과	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	3048
971	CSS	CSS 불투명도 / 투명성	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2126
970	HTML	레이아웃용 테이블에<th>나scope이 사용될 경우에는 오류임.	위토즈 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	3040
969	HTML	IE9 이전 버전에서 Canvas 사용가능하도록 하는 js 라이브러리 [2]	위토즈 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	3518
968	CSS	CSS 결합 자 - 인접한 형제 선택기	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2441
967	CSS	CSS 결합 자 - 하위 선택자	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1932
966	CSS	CSS 결합 자 - 하위 선택기	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1696
965	CSS	CSS 레이아웃 - 이미지 센터하기	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2695
964	CSS	CSS 레이아웃 - 가운데 맞춤 텍스트	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2576
963	CSS	CSS 레이아웃 - 가운데 정렬 요소	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	3108
962	CSS	float : The clearfix Hack(clearfix 해킹)	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1808
961	CSS	float : The clear Property(clear 속성)	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1497
960	CSS	CSS 레이아웃 - 플로팅 및 삭제	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2269
959	CSS	CSS Overflow auto	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1889
958	CSS	CSS Overflow Hidden	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2146
957	CSS	CSS Overflow Visible	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2185
956	CSS	css position Overlapping Elements(겹치는 요소들)	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2048
955	CSS	css position: absolute;	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2210
954	CSS	css position: fixed;	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2339
953	CSS	CSS 레이아웃 - position: relative; 속성 [1]	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2890
952	CSS	CSS 레이아웃 - position static 속성	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2496
951	CSS	너비, 최대 너비 및 여백 사용 : auto; 사용	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2378
950	CSS	display:block	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1858
949	CSS	Display: none;	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1906
948	CSS	display 속성	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2091

div 내의 수직 수평 중앙 정렬

댓글 작성

댓글 19개

게시판 목록

퍼블리셔팁

[CSS] 수직 탐색 막대 예제

[CSS] Vertical Navigation Bar [1]

[CSS] Navigation Bars

[CSS] [CSS] Float : left, right, inherit, none.

[CSS] CSS 투명한 호버 효과 2

[CSS] CSS 투명한 호버 효과

[CSS] CSS 불투명도 / 투명성

[HTML] 레이아웃용 테이블에<th>나scope이 사용될 경우에는 오류임.

[HTML] IE9 이전 버전에서 Canvas 사용가능하도록 하는 js 라이브러리 [2]

[CSS] CSS 결합 자 - 인접한 형제 선택기

[CSS] CSS 결합 자 - 하위 선택자

[CSS] CSS 결합 자 - 하위 선택기

[CSS] CSS 레이아웃 - 이미지 센터하기

[CSS] CSS 레이아웃 - 가운데 맞춤 텍스트

[CSS] CSS 레이아웃 - 가운데 정렬 요소

[CSS] float : The clearfix Hack(clearfix 해킹)

[CSS] float : ​The clear Property(clear 속성)

[CSS] CSS 레이아웃 - 플로팅 및 삭제

[CSS] CSS Overflow auto

[CSS] CSS Overflow Hidden

[CSS] CSS Overflow Visible

[CSS] css position Overlapping Elements(겹치는 요소들)

[CSS] css position: absolute;

[CSS] css position: fixed;

[CSS] CSS 레이아웃 - position: relative; 속성 [1]

[CSS] CSS 레이아웃 - position static 속성

[CSS] 너비, 최대 너비 및 여백 사용 : auto; 사용

[CSS] display:block

[CSS] Display: none;

[CSS] display 속성

[CSS] float : The clear Property(clear 속성)