前言

本文主要講解有幾種方法可以實(shí)現(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>

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

position絕對(duì)定位+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實(shí)現(xiàn)了垂直水平居中，那么好，我們開始講解。

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

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

表格布局

<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，使其成為一個(gè)包含單元格的表格容器，在子容器中設(shè)置為表格單元格，并且用vertival-alige和text-align分別垂直和水平居中。

缺點(diǎn)

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

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

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

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

最新評(píng)論