1. Căn giữa với element
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 |
<style> .container { display: flex; flex-wrap: wrap; } .parent { margin: 10px; width: 200px; height: 200px; background-color: green; } .child { width: 100px; height: 100px; background-color: orange; display: flex; justify-content: center; align-items: center; color: white; } .example-1 { display: flex; justify-content: center; align-items: center; } .example-2 { display: flex; justify-content: center; align-content: center; flex-wrap: wrap; } .example-3 { display: flex; } .example-3 > .child { margin: auto; } .example-4 { position: relative; } .example-4 > .child { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } </style> <div class="container"> <div class="parent example-1"> <div class="child">1</div> </div> <div class="parent example-2"> <div class="child">2</div> </div> <div class="parent example-3"> <div class="child">3</div> </div> <div class="parent example-4"> <div class="child">4</div> </div> </div> |
2. Căn giữa hình ảnh
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<style> .container { margin: 10px; width: 200px; height: 200px; } .example-1 { background-image: url("https://source.unsplash.com/400x300/?sport"); background-position: center; background-repeat: no-repeat; background-size: cover; } .example-2 > img { width: 100%; height: 100%; object-fit: cover } </style> <div class="container example-1"></div> <div class="container example-2"> <img src="https://source.unsplash.com/400x300/?sport" alt=""> </div> <img src="https://source.unsplash.com/400x300/?sport" alt=""> |
