반응형
자주 사용되면 서도 늘 찾게 되는 것이 요소의 중앙 정렬이다.
다음은 중앙 정렬의 예시이다. 중앙 정렬 방법은 여러가지가 있기 때문에 정렬 요소에 따라 방법이 달라 질 수 있다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="author" content="Developer N">
<title>date methode</title>
<style>
.center {
height: 200px;
position: relative;
border: 3px solid green;
}
.center div {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.center p {
text-align: center;
}
</style>
</head>
<body>
<div class="center">
<div>
<p>Horizontal & Vertical Align<br>가로 및 세로 정렬</p>
<p>여러 요소 동시에 정렬 할 수 있다.</p>
</div>
</div>
</body>
</html>
반응형
'CSS3' 카테고리의 다른 글
| [CSS3] 모서리 둥글게 하는 css 요소 border-radius (0) | 2019.12.04 |
|---|---|
| [CSS3] 사용하는 단위계의 종류 (0) | 2019.12.03 |
| [CSS3] outline과 border의 차이 (0) | 2019.12.01 |
| [CSS3] CSS style guide (0) | 2019.11.06 |
| [CSS3] 가로 세로 중앙 정렬 방법(2) (0) | 2019.10.30 |
| [CSS3] grid system : cell (0) | 2019.10.29 |
| [CSS3] grid system : template (0) | 2019.10.28 |
| [CSS3] grid system : Basic container (0) | 2019.10.28 |
DeveloperN
개발자 n의 개발 이야기(draft)