前言

本文主要講解有幾種方法可以實現(xiàn)容器與子容器水平垂直居中，這些方法的使用方式。那么好，本文正式開始。

子容器

Flexbox 布局

<div style="display: flex;justify-content: center;align-items: center;border:1px solid gray;height:100px;width:100px;">
	<div>1</div>
</div>

在上述代碼中我們實現(xiàn)了垂直水平居中布局，用到的是FlexBox，先用display：flex把這個div變成一個Flex容器，用justify-content:center用于在主軸（默認水平）上居中對齊，用align-items:center在側(cè)軸（默認垂直）上居中對齊。實現(xiàn)了一個子容器的水平居中對齊。

position絕對定位+transform

<div style="position: relative;width:100px;height:100px;border:1px solid gray;">
	<div style="position: absolute;top:50%;left:50%;transform: translate(-50%, -50%)">1</div>
</div>

在上述代碼中我們用position+transform實現(xiàn)了垂直水平居中，那么好，我們開始講解。

首先在父容器中，設(shè)置relative相對定位，以便子容器實現(xiàn)絕對定位，否則它將定位到整個頁面為父元素、然后在子容器中設(shè)置絕對定位，使其脫離正常文檔流，定位到relative最近的那個div并且設(shè)置它的top和left，將容器的頂部和左側(cè)定位到父容器中心，最后使用transform函數(shù)，將內(nèi)部div沿著自身寬高的一般向左上移動這樣則可以保證元素完全居中。

注：top和left的50%只是讓子元素處在父容器的中心位置，而不會保證完全劇中，只有添加transform函數(shù)才會讓元素根據(jù)自身尺寸想左上移動，前者是父容器的中心點，后者是元素本身中心點。

表格布局

<div style="display: table; width:100px;height:100px;border:1px solid gray;">
	<div style="display: table-cell;vertical-align: middle;text-align: center ">1</div>
</div>

table表格布局是一種傳統(tǒng)布局，通過在父容器中設(shè)置display:table，使其成為一個包含單元格的表格容器，在子容器中設(shè)置為表格單元格，并且用vertival-alige和text-align分別垂直和水平居中。

缺點

Flex布局缺點：舊版瀏覽器對flexbox支持不完全，可能需要兼容性處理。

絕對定位+transform變換缺點：不適合響應(yīng)式布局：絕對定為在固定尺寸容器實現(xiàn)，因此不能適應(yīng)不同屏幕尺寸和設(shè)備的布局要求。
對文檔流的影響：使用絕對定位可以使元素脫離正常文檔流，這可能導(dǎo)致其他元素的布局受到影響。

CSS表格布局缺點：缺乏靈活性：使用表格布局時，難以輕松地對元素進行自適應(yīng)調(diào)整，并且在處理復(fù)雜布局需求時可能存在一些限制。
響應(yīng)式布局的挑戰(zhàn)：由于表格布局通常是基于固定的行和列，它可能不太適合實現(xiàn)響應(yīng)式布局，即在不同設(shè)備和屏幕尺寸上調(diào)整布局。

到此這篇關(guān)于CSS3幾種實現(xiàn)子容器水平垂直居中的方法的文章就介紹到這了,更多相關(guān)CSS3 子容器水平垂直居中內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

最新評論