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

46次阅读

共计 851 个字符,预计需要花费 3 分钟才能阅读完成。

实现左右居中:
办法一:

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;

正文完
 0