CSS各種居中實現方式

2021-08-18 23:27:11 字數 2494 閱讀 9515

css居中是每次布局都需要面對的問題，但是同乙個居中方法並不是任何元素都能使用的，內聯元素和塊級元素的居中方式各不相同，下面我就對它們分別進行討論和總結。

以下例項都是基於下面的html**：

class="out">


class="in">


居中元素


span>


div>
父元素樣式設定為text-align:center，裡面包含的行內元素居中,如果父元素內部還存在包含文字且不定寬的塊元素，那麼這個塊元素也會居中。

.out
父元素樣式設定為display:flex; justify-content:center，裡面包含的行內元素居中。

.out
單行文字：可將其父元素的高度和行高設定為相等的值 height = line-height

.out
多行文字：用乙個span標籤將所有的文字封裝起來，再用乙個容器包裹span，設定屬性display: table-cell;vertical-align: middle。這種方法同樣適用於使居中。

.middle-box


.middle-inner
.out

父元素樣式設定為display:flex; align-items: center，裡面包含的行內元素居中。

.out

以下例項都基於下面的html**：

class="out">


class="in">


居中元素


div>


div>
定寬塊級元素水平居中

父元素樣式設定為display:flex; justify-content:center，則裡面包含的塊元素居中

.out
該元素樣式設定為 margin：0 auto；

.in
該元素樣式設定為 position: relative;left: 50%；margin-left: -0.5*width（負的該元素寬度的一半）

.in
上述方法把relative改為absolute也同樣適用，根據實際情況選擇適合自己的方法。

.in

不定寬塊級元素水平居中

對於包含文字的塊元素可將其父元素設定為text-align:center

.out
若不包含文字，可把該塊級元素變成行內元素，即設定display:inine，再給其父元素設定text-align:center

.out


.in
父元素樣式設定為display:flex; justify-content:center，則裡面包含的塊元素居中

.out
該元素樣式設定為 position: absolute;left: 50%;transform: translate(-50%,0)

.in
定高塊級元素垂直居中

父元素樣式設定為display:flex; align-items: center，則裡面包含的塊元素居中

.out
該元素樣式設定為 position: relative;top: 50%；margin-top: -0.5*height（負的該元素高度的一半）

.in
該元素的父元素的position值設定為relative，將該元素樣式設定為position: absolute;top:50%;margin-top: -0.5*height

.out


.in
該元素的父元素的position值設定為relative，將該元素樣式設定為position: absolute;top:0;bottom: 0;left: 0;right: 0;margin: auto;

.out


.in

不定高塊級元素垂直居中

父元素樣式設定為display:flex; align-items: center，則裡面包含的塊元素居中

.out
該元素樣式設定為 position: relative;top: 50%;transform: translate(0,-50%)

.in
該元素的父元素的position值設定為relative，將該元素樣式設定為position: absolute;top:50%;translate(0,-50%)

.out


.in

各種居中的css實現

文字的水平居中text align center 文字的垂直居中設定行高即可line height 20px vertival align是相對兄弟的行高來定位，所有加乙個空的兄弟使得高度等於父盒子 box img block div text align用於設定盒子的內容水平居中 文字屬性，子盒子...

CSS之各種居中

本部落格討論居中情況設定為總寬度不定,內容寬度不定的情況。改變大小時，仍然居中 特別說明 在元素設定position absolute 來設定居中效果時，除去部落格下介紹的css3方法外，還可以使用負的margin來居中，這樣解決了相容性的問題，但是只適用於寬高已知的情況 因為負的偏移量為元素寬高的...

CSS之各種居中

在我看來，入門css的路上最煩人的就是css的各種居中了。在我初學css過程中，居中這個問題經常困擾到我。那為什麼css的居中這麼煩人呢？我認為，這是因為css的居中方法以及它的適用範圍太多了，而導致應用時很難分清到底哪個有效。下面我就簡單地梳理一下css的居中方法。對於行內元素 如text lin...