CSS中轉塊狀居中是指元素相對于父容器垂直居中且水平居中。實現過程需要使用CSS布局技術,下面介紹兩種實現方法。
/* 方法一:flex布局 */ .parent { display: flex; justify-content: center; /*水平居中*/ align-items: center; /*垂直居中*/ } /* 方法二:定位 */ .parent { position: relative; } .child { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
第一種方法使用了CSS3的flex布局,只需要在父容器上設置display: flex,就能將子元素垂直和水平都居中。其中justify-content屬性是用來控制水平方向的對齊方式,可選值包括:flex-start、flex-end、center、space-between和space-around;align-items屬性是用來控制垂直方向的對齊方式,可選值包括:flex-start、flex-end、center、baseline和stretch。
第二種方法通過將子元素的top和left屬性都設置為50%,然后使用CSS3的transform屬性將其向左和向上移動50%的位置來實現居中。需要注意的是,這種方法需要將父容器的position屬性設置為relative,保證子元素是根據父容器來定位的。