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