实现左右居中:
办法一:
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;