LinHuijuan's Blog

水平垂直居中

# 水平垂直居中

[TOC]

# 一、水平居中

# 1.1 内联元素

在爸爸身上写text-align:center

# 1.2 块级元素

margin-left: auto;margin-right: auto

  • 为什么margin:0 auto;水平居中不了？
    • 必备条件：块级+指定宽度
    • 注意事项：inline-block无效。

# 二、垂直居中

# 2.1 父级height未死

.parent{padding: 10px 0}

# 2.2 父级height写死

# 2.3 文本

# 2.3.1 单行文本

line-hight

# 2.3.2 多行文本垂直居中

暂略

# 水平垂直居中

# 3.1基于绝对定位的解决方案

# 3.1.1calc()

body {
    height: 100vh;
}

main {
    position: absolute;
    width: 18em;
    height: 6em;
    // 使用calc()动态运算时,要注意加减运算时，符号前后要加空格。
    // 乘除运算则不需要
    top: calc(50% - 3em);	// 注意3em不要少了单位
    left: calc(50% - 9em);
}
1
2
3
4
5
6
7
8
9
10
11
12
13

# 3.1.2 translate()

main {
    position: absolute;
    width: 18em;
    height: 6em;
    top: 50%;
    left: 50%;
    /* 注意这里启动了3D硬件加速哦 会增加耗电量的 */
    transform: translate(-50%,-50%);
}
1
2
3
4
5
6
7
8
9

# 3.2 基于视口单位的解决方案

main {
    width: 18em;
    height: 2em;
    margin-top: 50vh;
    margin-left: 50vh;
    transform: translateX(-50%);
    transform: translateY(-50%);
}
1
2
3
4
5
6
7
8

# 3.3 基于Flexbox的解决方案（最佳解决方案）

# 3.3.1 margin

body {
    display: flex;
    min-height: 100vh;
}

main {
    margin: auto;
}
1
2
3
4
5
6
7
8

# 3.3.2 匿名容器（即文本节点）

<main> 3 </main>
main {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 18em;
    height: 10em;
}
1
2
3
4
5
6
7
8

图片处理