CSS实现元素水平垂直居中

在前端开发过程中,盒子居中是常常用到的。其中 ,居中又可以分为水平居中和垂直居中。块级元素的水平居中比较容易,直接设置元素的

0 auto```就可以实现,垂直居中相对来说是比较复杂一些的。
1
2
3
4
5
6
7
8
9
10
11
12
13
14

<!-- more -->
## 高度位置,使用绝对定位

```css
.parentElem {
position: relative;
}

.childElem {
position: absolute;
top: 50%;
transform: translateY(-50%);
}

父容器高度已知

且只有一个元素,只要使用相对定位即可

1
2
3
4
5
6
7
8
9
.parentElem {
height: 200px;
}

.childElem {
position: relative;
top: 50%;
transform: translateY(-50%);
}

水平居中方案

行内元素

1
text-aligin: center;

块级元素,宽度固定

1
margin: 0 auto;

块级元素,宽度不定

1
margin: 0 auto;

vertical-align 垂直对齐

  1. 元素默认垂直对齐方式为基准对齐(baseline)
  2. 继承性: 不继承
  3. 适用于行内元素和单元格(table-cell)元素

语法

  • : 基准线
    1
    2
    3
    4
    5
    6
    7
    8
    9
    > * ```middle``` : 中部对齐
    > * ```top``` : 顶端对齐
    > * ```bottom``` : 底端对齐
    > * ```text-top``` : 与文本顶部对齐
    > * ```text-bottom``` : 与文本底部对齐
    > * ```sub``` : 下标
    > * ```super``` : 上标
    > * ```<百分比>```,```<长度>``` : 可为负数
    > * ```inherit

垂直对齐属性

图片本身没有基线,则将其底部与父元素的基线对齐。

参考:垂直对齐:vertical-align属性

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×