> For the complete documentation index, see [llms.txt](https://blog.yuyy.tech/mian-shi-shu-li/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://blog.yuyy.tech/mian-shi-shu-li/qian-duan-ji-chu/css/shui-ping-ju-zhong-chui-zhi-ju-zhong.md).

# 水平居中、垂直居中

## 一、行内元素

* 水平：`text-align: center`
* 垂直：`line-height: {父元素高度}px`

## 二、块状元素

### 1、子元素宽高确定：

方式1：绝对定位 + 各方向为0 + margin:auto

{% embed url="<https://codepen.io/yuyy/full/GRXvajY>" %}

方式2：绝对定位 + left/top:50% + margin-left/margin-top: 宽/高一半

{% embed url="<https://codepen.io/yuyy/full/XWPerMp>" %}

### 2、子元素宽高不确定

绝对定位 + left/top:50% + transform: translate(-50%)

{% embed url="<https://codepen.io/yuyy/full/rNZzgJy>" %}

## 三、万能方案

flex

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