html水平居中垂直居中,css水平居中和css垂直居中

#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;

}