centerImage.md

Bootstrap - Center Image or Div

SOURCE, SOURCE, SOURCE

1. How to Center Image/Div in Div:

<div class="container">
	<img src="..." height="20">
</div>

CSS way:

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

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

}

Bootstrap way:

<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:

<div class="container">
	<img src="..." height="20">
</div>

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

CSS way:

.container {
  img {
    display: block;
    margin-left: auto;
    margin-right: auto;
	}
}

Bootstrap way:

<div class="container">
	<img class="d-block mx-auto" src="..." height="20">
</div>