本文目錄導(dǎo)讀：

1. 居中技巧
2. 浮動(dòng)技巧

CSS 居中與浮動(dòng)技巧

在CSS中，居中和浮動(dòng)是兩種常見的布局技巧，它們可以幫助我們更好地控制網(wǎng)頁元素的位置和排版。

居中技巧

在CSS中，我們可以使用多種方法來居中元素，使用flexbox布局是一種簡單而強(qiáng)大的方法，我們可以將元素包含在flex容器中，并利用justify-content和align-items屬性來實(shí)現(xiàn)水平和垂直居中。

以下代碼將一個(gè)div元素居中：

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

我們還可以使用position屬性來將一個(gè)元素固定在頁面的中央，這種方法需要手動(dòng)計(jì)算元素的top和left值，但可以實(shí)現(xiàn)更***的控制。

浮動(dòng)技巧

在CSS中，float屬性用于將元素浮動(dòng)到其父元素的左側(cè)或右側(cè)，這可以幫助我們創(chuàng)建更靈活的布局，特別是在處理圖像和文字時(shí)。

以下代碼將一個(gè)圖像浮動(dòng)到文本的右側(cè)：

img {
  float: right;
}

需要注意的是，浮動(dòng)元素會(huì)脫離正常的文檔流，因此可能會(huì)影響到其他元素的排版，為了解決這個(gè)問題，我們可以使用clear屬性來清除浮動(dòng)元素的影響。

居中和浮動(dòng)是CSS中兩種重要的布局技巧，它們可以幫助我們更好地控制網(wǎng)頁元素的位置和排版，使網(wǎng)頁更加美觀和易用。