CSS是前端開發(fā)中必不可少的一環(huán),它可以控制頁面的布局、樣式和效果,其中控制view居中顯示是一個(gè)常見的需求。
常見的幾種方式:
//水平居中 .parent { display: flex; justify-content: center; align-items: center; } //垂直居中 .parent { position: relative; } .child { position: absolute; top: 50%; transform: translateY(-50%); } //水平垂直都居中 .parent { position: relative; } .child { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
上面的代碼中,我們分別使用了flex布局和絕對(duì)定位,來達(dá)到view居中的效果。
總結(jié):要想實(shí)現(xiàn)view居中,需要考慮父元素和子元素的布局方式,選用合適的方案可以避免頁面錯(cuò)亂和布局不美觀的問題。