CSS中的居中是我們?cè)陧?yè)面設(shè)計(jì)中常用的操作之一,其中最流行的方式是使用Flex居中。接下來(lái)為大家簡(jiǎn)單介紹一下如何使用CSS進(jìn)行居中以及如何使用Flex進(jìn)行居中。
一、使用CSS進(jìn)行居中
.container { position: relative; height: 400px; } .item { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
上面的代碼中,我們給包裹元素container設(shè)置了position: relative;并且給需要居中的元素item設(shè)置了position: absolute;和top: 50%;left: 50%;這樣元素item就在父元素container下的中央了。
二、使用Flex進(jìn)行居中
.container { display: flex; align-items: center; justify-content: center; }
上面的代碼中,我們使用了flex布局,給父元素container指定了display: flex;并且給align-items和justify-content都設(shè)置為center,這樣元素就會(huì)自動(dòng)居中了。其中align-items用于控制元素沿著交叉軸(一般是垂直于主軸的軸線)的對(duì)齊方式,而justify-content則用于控制元素沿著主軸(一般是水平的軸線)的對(duì)齊方式。
總結(jié):無(wú)論是使用CSS進(jìn)行居中還是使用Flex進(jìn)行居中,我們都可以很容易的實(shí)現(xiàn)元素的居中顯示。但是具體使用哪種方式,還需要根據(jù)實(shí)際情況的需求來(lái)決定。