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;