此地无银三百两

  • 首页

垂直居中的几种方法

发表于 2021-04-14

绝对定位与margin-top(负外边距)

绝对定位与transform

[tranlate(50%,-50%)](https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform-function/translate())

使用绝对定位结合margin:auto

1. 垂直居中的元素相对于父元素绝对定位 2. top和bottom相等 3. margin:auto

对父元素使用padding

  • 父元素不设置height

  • 父元素padding设置为子元素的height

使用flex布局

flex布局经典教程

1
2
3
display:flex;
text-align:center;
align-items:center;
1…282930…32

32 文章
11 标签
GitHub
© 2021 ajn404
由 Hexo 强力驱动
|
主题 — NexT.Pisces v5.1.4