CSS / Flex / 정가운데 배치하기
justify-content, align-items 속성을 이용하여 안쪽 요소를 바깥쪽 요소의 정가운데에 배치할 수 있습니다.
<!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> body { box-sizing: border-box; margin: 0px; font-family: Consolas, monospace; } .jb-container { height: 100vh; background-color: #01579b; display: flex; justify-content: center; align-items: center; } .jb-item { padding: 20px; background-color: #ffffff; } </style> </head> <body> <div class="jb-container"> <div class="jb-item">Item</div> </div> </body> </html>