CSS中設定內容居中學習記錄

2021-09-25 07:55:59 字數 517 閱讀 8486

1.如果是文字樣式，可以通過高度height和行高line-height來實現垂直居中，通過text-align設定水平居中

p
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
學習部落格：

css中設定table中的td內容自動換行

word break break all和word wrap break word都是能使其容器如div的內容自動換行。table裡 固定大小並且內容自動換行 給table 加上 table layout fixed word break break all word wrap break word...

CSS高階篇 div中的內容垂直居中的五種方法

如果要垂直居中的只有一行或幾個文字，那它的製作最為簡單，只要讓文字的行高和容器的高度相同即可，比如 p這段 可以達到讓文字在段落中垂直居中的效果。另一種方法和行高法很相似，它同樣適合一行或幾行文字垂直居中，原理就是利用padding將內容垂直居中，比如 p這段 的效果和line height法差不多...

CSS總結div中的內容垂直居中的五種方法

文章目錄 一 行高 line height 法 二 內邊距 padding 法 三 模擬 法 四 css3的transform來實現 五 css3的box方法實現水平垂直居中 六 flex布局 2018 04 17補充 一 行高 line height 法 如果要垂直居中的只有一行或幾個文字，那它的...