css로 수직 수평 가운데 정렬하는
가장 간편한 방법입니다
가장 간편한 방법입니다
css를 통하여 text-align: center 또는 margin: 0 auto 등을 이용하여,
수평 가운데 정렬을 하는 방법은 많이 알고 있지만,
수직 가운데 정렬하는 방법은 정확하지 않고, tricky 한 편입니다.
이때 간편하게 가운데 배치하는 방법이 display: flex 입니다.
수직 가운데 정렬
부모 또는 해당 요소 css
display: flex;
align-items: center;
예제
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.testWrap {
width: 300px;
height: 300px;
background-color: skyblue;
margin-bottom: 50px;
display: flex;
align-items: center;
}
.imgWrap {
width: 300px;
height: 300px;
background-color: pink;
display: flex;
align-items: center;
}
</style>
</head>
<body>
<div class="testWrap">
<div class="textInner">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam nulla, quaerat itaque, magnam tempora quam, voluptate eos rerum iste voluptas officia voluptatum. Vero recusandae, possimus consectetur culpa nesciunt necessitatibus molestias.</div>
</div>
<div class="imgWrap">
<img class="imgInner" src="http://placeimg.com/150/150/any" />
</div>
</body>
</html>
Before
수직 가운데 After
수평 가운데 정렬
justify-content: center; 시 가로 중앙 정렬이 됩니다.
display: flex;
justify-content: center;
수직, 수평 가운데 정렬
display: flex;
align-items: center; //세로 가운데 맞춤
justify-content: center; //가로 가운데 맞춤수직, 수평 가운데 정렬 AFTER
반응형
'💻CODING > html, css' 카테고리의 다른 글
| [css] block, inline의 뜻과 사용법(ft. display, inline-block) (0) | 2021.05.24 |
|---|---|
| thailwind css 스타일 프레임워크 (ft. 무료 컴포넌트 사이트 제공) (0) | 2021.04.29 |
| [css] reset css 기본값 코드(ft. 기본 css 세팅) (0) | 2021.01.25 |
| [css] 말줄임 표시(ft. text-overflow: ellipsis, 반응형) (0) | 2021.01.21 |
| [css] float 속성( float:left clear: both ::after) (ft. 실무사용 꿀팁) (6) | 2020.09.25 |
댓글