【HTML/CSS】CSS实现垂直水平居中
相信在工作中经常会遇到需要某某元素垂直水平居中的需求，下面总结一下实现方法
元素已知宽度
绝对定位 + margin反向偏移
html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>Sumon Test</title> <div style="background-color: yellow; width: 300px; height: 300px; position: relative; "> <div style="background-color: #F00; width: 100px; height: 100px; position: absolute; left: 50%; top: 50%; margin: -50px 0 0 -50px; "> </div> </div> </head> <body> </body> </html>
元素未知宽度
绝对定位 + margin auto + 流体特性
html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>Sumon Test</title> <div style="background-color: yellow; width: 300px; height: 300px; position: relative; "> <div style="background-color: #F00; width: 100px; height: 100px; position: absolute; left: 0; top: 0; bottom: 0; right: 0; margin: auto; "> </div> </div> </head> <body> </body> </html>Tips
当一个绝对定位元素，其对立定位方向属性同时有具体定位数值的时候，流体特性就发生了。 具有流体特性绝对定位元素的margin:auto的填充规则和普通流体元素一模一样： 1.如果一侧定值，一侧auto，auto为剩余空间大小； 2.如果两侧均是auto, 则平分剩余空间；
绝对定位 + transform反向偏移
html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>Sumon Test</title> <div style="background-color: yellow; width: 300px; height: 300px; position: relative; "> <div style="background-color: #F00; width: 100px; height: 100px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); "> </div> </div> </head> <body> </body> </html>
flex布局
html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>Sumon Test</title> <div style="background-color: yellow; width: 300px; height: 300px; display: flex; justify-content: center; align-items: center; "> <div style="background-color: #F00; width: 100px; height: 100px; "> </div> </div> </head> <body> </body> </html>Tips
1.justify-content 设置水平方向的元素位置 2.align-items 设置垂直方向的元素位置
table-cell布局
html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>Sumon Test</title> <div style="background-color: yellow; width: 300px; height: 300px; display: table-cell; vertical-align: middle; text-align: center; "> <div style="background-color: #F00; width: 100px; height: 100px; display: inline-block; "> </div> </div> </head> <body> </body> </html>Tips
1.vertical-align 设置元素的垂直对齐方式 2.text-align 设置元素中的文本的水平对齐方式
以上就是我对CSS实现垂直水平居中的总结，如有异议欢迎评论留言。
相关推荐
gufudhn 2020-06-12
沈宫新 2020-05-04
STPace 2020-02-17
libowen0 2014-05-30
Phoebe的学习天地 2019-07-01
Phoebe的学习天地 2019-07-01
王为仁 2019-07-01
WebVincent 2019-07-01
libowen0 2019-06-30
淡风wisdon大大 2019-06-28
冰蝶 2018-08-17
qiupu 2019-06-28
Dorissun 2016-09-22
hellowzm 2020-10-12
liusure0 2020-01-11
jiedinghui 2019-12-23