css样式之"居中"的几个方法

时间:2022-01-06 来源:未知网络 作者:996建站网

1:通用水平,垂直居中之flex

.parent{ display : flex; justify-content : center; align-items : center; }

2:通用水平,垂直居中之absolute + transform

.parent{ position : relative }

.child{ position : absolute; left : 50%; top : 50%; transform : translate(-50%, -50%) }

3:内联元素水平居中

.parent{ text-align : center; }

4:内联元素垂直居中

.parent{ height : 100px; line-height : 100px; }

你的高度设置多少,行高也得设置相等数值

5:定宽级元素水平居中

.child{ margin : 0 auto; }

css样式之"居中"的几个方法插图

微信扫一扫 关注公众号

微信扫一扫 使用小程序

百度扫一扫 使用小程序