#center-hor1{ background-color: red; color: #F8CBAD; top: 50%; left :50%; width: 100px; position: absolute; /*transform: translateY(-50%); !*防止多行出现的对齐问题*!*/ transform: translate(-50%, -50%); } #center-hor2 { position:absolute; color: #F8CBAD; width:100px; height:100px; top:50%; left:50%; margin-top:-50px; /*height的一半*/ margin-left:-50px;/*width的一半*/ background:red; } #center-hor3{ background-color: red; color: #F8CBAD; width: 100px; height: 100px; margin: auto; left: 0; right: 0; top: 0; bottom: 0; position: absolute; } #center-ohor1 { background-color: red; color: #F8CBAD; position: relative; top: 50%; transform: translateY(-50%); /*防止多行出现的对齐问题*/ } #center-ver1 { background-color: red; color: #F8CBAD; border: 1px black solid; display: inline-block; width: 150px; } #center-ver2 { background-color: red; color: #F8CBAD; border: 1px black solid; width: 150px; margin: 0 auto; text-align: center;/*让文本居中*/ } #center-ver3 { display: flex; flex-direction: row;/*主轴方向row为默认*/ justify-content: center;/*主轴对齐方式*/ align-items: center; } #center-ver3 div { width: 50px; height: 100px; border: 1px black solid; } #center-ver4 { display: flex; flex-direction: column;/*主轴为列*/ justify-content: center;/*主轴对齐方式*/ align-items: center; } #center-ver4 div { height: 50px; width: 100px; border: 1px black solid; } ul > li { border: 1px black solid; width: 200px; } ul > li > span { color: blueviolet; }
主要是利用position:absolute和flex这两种方式进行的居中设置