markdown Bootstrap - 中心图像

Posted 2021-05-05

# Bootstrap - Center Image or Div

[SOURCE](https://getbootstrap.com/docs/4.0/utilities/flex/), [SOURCE](https://getbootstrap.com/docs/4.1/content/images/#aligning-images),
[SOURCE](https://www.w3.org/Style/Examples/007/center.en.html)

## 1. How to Center Image/Div in Div:
```html
<div class="container">
	<img src="..." height="20">
</div>
```

*CSS* way:

```css
.container {
  display: flex;
  justify-content: center; //center horizontally
  align-items: center; //center vertically

	...
	height: 70px;
	padding: 10px 20px;

}
```

*Bootstrap* way:

```html
<div class="container d-flex justify-content-center align-items-center">
	<img src="..." height="20">
</div>
```

## 2. How to Center Image in Div Horizontally Only:
```html
<div class="container">
	<img src="..." height="20">
</div>
```

Use method 1 without `align-items: center;` option or:

*CSS* way:
```css
.container {
  img {
    display: block;
    margin-left: auto;
    margin-right: auto;
	}
}
```

*Bootstrap* way:
```html
<div class="container">
	<img class="d-block mx-auto" src="..." height="20">
</div>
```