likes
comments
collection
share

通过css实现样式居中的几种范式

作者站长头像
站长
· 阅读数 32

实现左右居中:方法一:

margin: 0 auto;

方法二:

display: flex;
justify-content: center;

方法三:(特定情况,比如标签内容居中,文字按钮内容居中)

padding: 0 20px;

方法四:

position: relative;
transform: translateX(-50%);

方法五:

position: relative;
top: 50%;
margin-left: -20px;

方法六:

display: gird;
justify-items: center;

方法七:

display: table-cell;
text-align: center;

实现上下居中:方法一:

margin auto 0;

方法二:

display: flex;
align-items: center;

方法三:

display: gird;
align-items: center;

方法四:

padding: 20px 0;

方法五:

position: relative;
transform: translateY(50%);

方法六:

position: relative;
top: 50%;
margin-top: -20px;

方法七:

display: table-cell;
vertical-align: middle;

方法八:

line-height: 40px;

实现上下左右居中:方法一:

position: relative;
top: 0;
left: 0;
bootom: 0;
right: 0;

方法二:

display: flex;
align-items: center;
justify-content: center;

方法三:

display: gird;
align-items: center;
justify-items: center;

方法四:

display: table-cell;
text-align: center;
vertical-align: middle;

方法五:

padding: 20px 20px;

方法六:

margin: 0 auto;
line-height: 40px;