html怎么水平上下剧中,【HTML/CSS】CSS实现垂直水平居中

相信在工作中经常会遇到需要某某元素垂直水平居中的需求，下面总结一下实现方法

元素已知宽度

绝对定位 + margin反向偏移

html

Sumon Test

元素未知宽度

绝对定位 + margin auto + 流体特性

html

Sumon Test

Tips

当一个绝对定位元素，其对立定位方向属性同时有具体定位数值的时候，流体特性就发生了。

具有流体特性绝对定位元素的margin:auto的填充规则和普通流体元素一模一样：

1.如果一侧定值，一侧auto，auto为剩余空间大小；

2.如果两侧均是auto, 则平分剩余空间；

绝对定位 + transform反向偏移

html

Sumon Test

flex布局

html

Sumon Test

Tips

1.justify-content 设置水平方向的元素位置

2.align-items 设置垂直方向的元素位置

table-cell布局

html

Sumon Test

Tips

1.vertical-align 设置元素的垂直对齐方式

2.text-align 设置元素中的文本的水平对齐方式

以上就是我对CSS实现垂直水平居中的总结，如有异议欢迎评论留言。