CSS3 如何讓圖片劇中
CSS3 中提供了多種方法來讓圖片劇中，下面介紹其中的兩種方法。
方法一：使用 flexbox
flexbox 是 CSS3 中用來實現彈性盒子布局的一個模塊，通過使用 flexbox 可以很方便地實現圖片劇中。
首先，我們需要將圖片包裹在一個 div 容器中，并設置 div 容器的樣式為：
```css
.container {
display: flex;
justify-content: center;
align-items: center;
}
```
上述代碼將 div 容器設置為一個彈性容器，并將圖片在容器中水平和垂直居中。
然后，將圖片的樣式設置為：
```css
.image {
max-width: 100%;
max-height: 100%;
}
```
上述代碼將圖片的最大寬度和最大高度設置為 100%，以適應不同尺寸的屏幕。
最后，將圖片放置在 div 容器中：
```html
```
方法二：使用絕對定位和 transform
另一種實現圖片劇中的方法是使用絕對定位和 transform。
首先，將圖片的樣式設置為：
```css
.image {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 100%;
max-height: 100%;
}
```
上述代碼將圖片設置為絕對定位，然后將其上下左右分別設置為 50%，使其水平和垂直居中。transform 屬性用來將圖片在水平和垂直方向上分別平移其自身大小的一半，以實現居中效果。最大寬度和最大高度同樣設置為 100%。
同樣將圖片放置在一個 div 容器中：
```html```
至此，我們已經介紹了兩種通過 CSS3 實現圖片劇中的方法。
段落使用 p 標簽，代碼使用 pre 標簽
在 HTML 中，段落通常使用 p 標簽表示，代碼則使用 pre 標簽表示。
p 標簽的使用方法：
```html
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed accumsan consectetur odio, eu iaculis risus gravida ut. Donec tristique convallis tincidunt.
``` pre 標簽的使用方法： ```htmlfunction exampleFunction() {
var x = "Hello World!";
console.log(x);
}