> For the complete documentation index, see [llms.txt](https://notes.davidfeng.us/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://notes.davidfeng.us/web-developement/css-1.md).

# CSS

## How to center an \<img>?

Method 1: \<img> is an `inline` element. We can center it by converting it to a `block` element, then use the `margin: 0 auto;` trick.

```css
img.center {
    display: block;
    margin: 0 auto;
}
```

Method 2: if the parent element is a `block` element (e.g. \<div>), we can use `text-align: center;` on the parent.