1.如果是文本样式,可以通过高度height和行高line-height来实现垂直居中,通过text-align设置水平居中
p { height:30px; line-height:30px; width:100px; overflow:hidden;text-align:center; }
2.如果是块级或者行块级,可以通过设置display:flex;垂直居中 justify-content :center; 排列方向flex-direction: column; 水平居中 align-items: center;
display :flex;
/*flex-direction: column;*/
/*仅仅是垂直居中*/
justify-content :center;
/*设置时 水平居中*/
align-items: center;
3.可以设置父级元素为display:table;子元素为display:table-cell;vertical-align:center;
.block_div2{
width: 30px;
height: 20px;
background: green;
/*内联元素设置*/
/*display: inline;*/
font-size:15px;
/*display: inline-block;*/
display: table-cell;
vertical-align:middle;
}
学习博客:
https://blog.csdn.net/Evan_QB/article/details/81364257
https://www.cnblogs.com/moqiutao/p/4807792.html
https://blog.csdn.net/u012863664/article/details/54782492