CSS中居中是網頁設計中經常會用到的一種樣式,它可以將網頁中的元素居中于頁面中間,讓整體效果更加美觀。下面我們將會介紹幾種在CSS中居中怎么表示的方法。
居中方式1:使用text-align 如果想要讓文字居中,可以使用text-align屬性,將它的值設為center即可,如下所示: p { text-align:center; } 這樣就可以讓文字居中了,如果是想讓一個塊元素居中呢?同樣可以使用text-align,只不過需要將它的作用目標換成父元素。 父元素 { text-align:center; } 居中方式2:使用margin 如果想要讓元素水平居中,可以使用margin屬性,將它的值設置為auto即可,如下所示: .box { width:200px; height:200px; margin:0 auto; } 這樣就可以將元素水平居中了,如果是想將一個內聯元素居中呢?同樣使用margin屬性,但是需要將它的作用目標換成父元素。 父元素 { text-align:center; } 子元素 { display:inline-block; margin:auto; } 居中方式3:使用transform 如果想要將一個塊元素垂直居中,可以使用transform屬性,將它的值設為translateY(-50%)即可,如下所示: .box { position:absolute; top:50%; left:50%; transform:translateY(-50%); } 這樣就可以將元素垂直居中了,如果是要將一個內聯元素垂直居中,同樣使用transform屬性,但是需要將它的作用目標換成父元素。 父元素 { display:flex; align-items:center; } 子元素 { margin:auto; } 以上就是CSS中居中怎么表示的幾種方法了,希望大家可以根據自己的需求來選取不同的居中方式,讓網頁效果更加完美。
上一篇css中屬性不可重復
下一篇css中導入圖片路徑