căn giữa với css3

Muốn căn giữa thằng con trong thằng cha thì thằng cha set như sau:
display: flex;
justify-content: center;//căn giữa theo chiều ngang
align-items: center;//căn giữa theo chiều dọc

-----
căn theo chiều dọc thằng con trong thằng cha thì thằng cha set như sau;
display: flex;
align-items: center;
------

nếu thằng con được set là position = absolute thì
set thằng con như sau

top:50%;
left: 50%;
transform: translate(-50%,-50%)

----
nếu chỉ căn giữa theo chiều ngang:
width: 100px; //ví dụ
margin: auto
text-align: center;

hoặc set thằng cha:
display: flex;
justify-content: center;
----
nếu muốn căn giữa ảnh theo chiều ngang:
display:block;

margin:auto;

---

nếu muốn căn giữa 1 element trong cả viewport(thẻ body) thì

.wrapper{

display: flex;

justify-content: center;

align-items: center;

width: 100vw;

height: 100vh;

}


với wrapper là thẻ phủ ngoài tất cả các thẻ