1. ์ํ ๊ฐ์ด๋ฐ ์ ๋ ฌ
์์ ์์์ marign : auto; ๋ฅผ ์ฌ์ฉํ๋ฉด ์ํ ๊ฐ์ด๋ฐ ์ ๋ ฌ์ ํฉ๋๋ค.
<html>
<head>
<style>
div#container {
width: 300px;
height: 300px;
background-color: lightskyblue;
}
div#me {
width: 100px;
height: 100px;
background-color: lightseagreen;
margin: auto;
}
</style>
</head>
<body>
<div id="container">
<div id="me"></div>
</div>
</body>
</html>
2. ์์ง ๊ฐ์ด๋ฐ ์ ๋ ฌ
๋ถ๋ชจ ์์์
display: flex;
align-items: center; ๋ฅผ ์ฌ์ฉํ๋ฉด ์์ง ๊ฐ์ด๋ฐ ์ ๋ ฌ์ ํฉ๋๋ค.
<html>
<head>
<style>
div#container {
height: 300px;
width: 300px;
background-color: lightskyblue;
display: flex;
align-items: center;
}
div#me {
width: 100px;
height: 100px;
background-color: lightseagreen;
}
</style>
</head>
<body>
<div id="container">
<div id="me"></div>
</div>
</body>
</html>
'Web > ๐งฉ html + CSS' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
| ๋ฐ์ค ๋ชจ๋ธ (0) | 2020.11.03 |
|---|---|
| ํ ์ด๋ธ ์์ฑ (0) | 2020.11.03 |
| ํฌ๊ธฐ (0) | 2020.11.03 |
| background ์์ฑ (0) | 2020.11.03 |
| font ์์ฑ (0) | 2020.11.03 |