CSS中设置内容居中学习记录

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