yanhaijing/vertical-center

垂直水平居中：display: -webkit-box

Open

#6 opened on Jun 5, 2020

View on GitHub
 (4 comments) (0 reactions) (1 assignee)HTML (444 stars) (60 forks)batch import
help wanted

Description

拜读大佬文章，受益颇多。

这里补充一种实现垂直水平的方法：display: -webkit-box

父元素设置：

display: -webkit-box;
/** 水平居中**/
-webkit-box-pack: center;
/** 垂直居中**/
-webkit-box-align: center;

缺点也很明显，兼容性不太好。

参见:https://ataola.github.io/show/zj/center-middle.html

Contributor guide

Tech stack
css
Domain
frontend
Issue type
documentation
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
1
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
under 1 hour
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
None
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
85
Research direction
该issue建议在垂直居中示例集合中添加`display: webkit box`方法。需要检查仓库中现有的文档结构（如README或HTML文件），找到示例列表部分，将新方法添加到适当位置。同时，由于该方法依赖旧语法且兼容性不佳，建议在说明中注明浏览器支持情况或推荐使用现代Flexbox方案。