css设置文字垂直居中css样式block元素的⽔平垂直居中
第⼀种元素居中⽅式：
给相对居中的⽗元素添加position:relative；相对定位（默认）。⽗级都没有默认body进⾏定位。
要定位的元素：
/*设置*/
position: absolute;
left: 50%;
top: 50%;
/*补差*/
margin-top: - <boxHeight/2> px;
margin-left: - <boxWidth/2> px;
第⼆种：通过 vertical-align: middle；属性实现⽔平或垂直居中。
1）、给⽗元素绑定⼀个伪元素（参考元素）css：
body::after {
content: "";
display: inline-block; /*设置为inline-block是因为想让该元素的⼤⼩由其内部撑开且能设置它的宽⾼，这样我们就能意义上的"参考线"了*/    height: 100% /*⽔平：width:100%;*/
vertical-align: middle;
}
2）、要⽔平或垂直居中的元素：
display: inline-block;/*保持相同，即只能运⽤于可inline-block的元素*/
width: 100px;
height: 100px;
vertical-align: middle;

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。