css 居中

图片垂直居中：text-align:center;

文字垂直居中：外层 div 设置行高 line-height: 36px;

# 水平居中

# 行内元素水平居中

text-align: center 可以实现在块级元素内部的行内元素水平居中。

此方法对行内元素(inline)，行内块(inline-block)，行内表(inline-table)，inline-flex 元素水平居中都有效。

# 块级元素水平定宽居中

1. margin: 0 auto;
1. absolute+ 负 maigin

position: absolute;
width: 100px;
left: 50%;
margin-left: -50px;

1
2
3
4

# 块级元素水平不定宽居中

1. flex 布局

justify-content: center

1. absolute+transform

position: absolute;
left: 50%;
transform: translateX(-50%);

1
2
3

1. table + margin

display: table; margin: 0 auto;

# 垂直居中

# 行内元素垂直居中

单行行内元素

line-height 属性设置的高度和父元素的高度相同即可

多行行内元素

flex 布局

display: flex;
flex-direction: column;
justify-content: center;

1
2
3

# 块级元素定宽-垂直居中

1. absolute + 负 margin

position: absolute;
height: 100px;
top: 50%;
margin-top: -50px;

1
2
3
4

1. absolute + margin auto

# 块级元素不定宽-垂直居中

1. flex

display: flex;
justify-content: center;
align-items: center;

1
2
3

1. absolute + transform

position: absolute;
top: 50%;
transform: translateY(-50%);

1
2
3

# 水平垂直居中

# 块级元素定宽-水平垂直居中

1. absolute+负 maigin

position: absolute;
width: 100px;
height: 100px;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;

1
2
3
4
5
6
7

1. absolute + margin: auto法

position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;

1
2
3
4
5
6

# 块级元素不定宽-水平垂直居中

1. flex

display: flex;
justify-content: center;
align-items: center;

1
2
3

1. absolute+transform

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

1
2
3
4

1. table-cell

display: table-cell;
text-align: center;
vertical-align: middle;

1
2
3

1. grid 网格

display: grid;
justify-self: center;
align-self: center;

1
2
3

更新时间: 12/24/2021, 4:08:09 PM

← css 回流重绘 css margin合并和塌陷→