一.水平居中
1.inline
使用padding
2.block
（1）單個block
設定width，使用margin：0 auto；
（2）多個block
可使用flex
display：flex;
justify-content:center;
（關於flex語法
二.垂直居中
1.inline
（1）單行
使用padding、
或者設定line-height
（2）多行
容器設定display: table;
文字設定display: table-cell;
再設定vertical-align: middle;與父元素中間基線對其
2.block
（1）已知元素高度
設定position: absolute;
top: 50%;
再根據高度設定margin-top
（2）未知元素高度
設定將元素移到父元素中間
position: absolute;
top: 50%;
再往回移動元素長度的一半
transform: translatey(-50%);
（3）使用flex
容器設定
flex-direction: column;
justify-content: center;
元素設定
background: black;
三.水平垂直居中
1）已知元素尺寸
設定position: absolute;
top: 50%;
left:50%;
再根據尺寸設定margin
（2）未知元素尺寸
設定將元素移到父元素中間
position: absolute;
top: 50%;
left:50%;
再往回移動元素長度的一半
transform:translate(-50%,-50%);
（3）使用flex
容器設定
flex-direction: column;
justify-content: center;
align-items:center;
元素設定
background: black;
CSS樣式設定 水平居中
2，定寬和塊狀元素 滿足定寬和塊狀兩個條件的元素是可以通過設定 左右margin 值為 auto 來實現居中的。3，不定寬和塊狀元素 a，為需要設定的居中的元素外面加入乙個 table 標籤，為這個 table 設定 margin 0 auto b，改變塊級元素的 display inline 然後...
css水平垂直居中設定
參考 水平居中 行內元素解決方案1 父層元素新增如下屬性即可 parent 水平居中 行內元素解決方案2 flex 水平居中 塊狀元素解決方案 self 水平居中 多個塊狀元素解決方案 將元素的display屬性設定為inline block，並且把父元素的text align屬性設定為center...
初學css 樣式設定（居中）
如果被設定元素為文字 等行內元素時，水平居中是通過給父元素設定text align center來實現的。當被設定元素為 塊狀元素 時用 text align center 就不起作用了，這時也分兩種情況 定寬塊狀元素和不定寬塊狀元素。這一小節我們先來講一講定寬塊狀元素。定寬塊狀元素 塊狀元素的寬度...