CSS中的view居中可以用來讓頁面中的元素在屏幕中水平和垂直居中。下面是實現view居中的方法。
1. 利用display和text-align屬性,將元素水平居中。
.element { display: flex; justify-content: center; text-align: center; }
2. 利用position、top、left、transform屬性,將元素垂直和水平居中。
.element { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
3. 利用margin和float屬性,將元素水平居中并加入浮動元素垂直居中。
.container { display: flex; justify-content: center; } .element { float: left; margin-top: auto; margin-bottom: auto; }
需要注意的是,實現view居中時應該根據實際情況選擇相應的方法,同時還要考慮元素本身的大小。只有當元素的大小確定時,才能正確實現view居中的效果。
上一篇css vw是什么單位
下一篇css v3.3