CSS是一種用于設(shè)置網(wǎng)頁(yè)樣式的編程語言,它可用于控制HTML元素的大小、顏色、位置等方面,其中定位是CSS的基本核心之一。在網(wǎng)頁(yè)設(shè)計(jì)中,如果要讓一個(gè)元素居中顯示,則可以使用CSS定位來實(shí)現(xiàn)。
.center{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); }
上述CSS代碼表示定義了一個(gè)CSS類.center,然后使用了position(定位)屬性來設(shè)置元素的定位,top和left屬性設(shè)置了該元素的上下和左右的邊距,其中top:50%和left:50%把元素定位在了父容器的中心位置。
transform屬性則可以控制元素的旋轉(zhuǎn)、縮放和平移等樣式效果,這里使用translate(-50%,-50%),讓元素基于自身的中心點(diǎn)位置在水平和垂直方向上移動(dòng)了自己寬高的50%。
這種屏幕居中的方法適用于絕大多數(shù)的Web頁(yè)面中,特別是在響應(yīng)式設(shè)計(jì)中更是使用到的最多的方法之一,因?yàn)樗梢员WC元素即使在不同尺寸的屏幕中也能夠完美地居中顯示。
上一篇css 定義li