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

1. 使用flexbox
2. 使用position屬性

CSS技巧：讓圖片和框架***居中

在CSS中，讓圖片或框架居中顯示，可以采用多種方法，這里我們介紹兩種常用的方法：使用flexbox和使用position屬性。

使用flexbox

Flexbox是CSS3中新增的一種布局方式，可以方便地讓元素在容器中居中顯示，要讓圖片或框架居中，可以將它們的父容器設(shè)置為flex布局，并利用justify-content和align-items屬性來調(diào)整位置。

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

使用position屬性

另一種方法是使用position屬性來定位圖片或框架，可以通過設(shè)置position為absolute或relative，并結(jié)合top、right、bottom、left屬性來調(diào)整位置。

.container {
  position: relative;
}
.image {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

這種方法可以讓圖片或框架在容器中任意位置顯示，但需要手動計(jì)算位置。

兩種方法都有各自的優(yōu)點(diǎn)和適用場景，使用flexbox可以方便地讓元素在容器中居中顯示，而使用position屬性可以更加靈活地定位元素，根據(jù)具體需求選擇適合的方法。