一. 水平居中
1.塊元素在已知寬度的情況下為其自身設定margin:auto(可以用block轉為塊元素)
.wrap
.wrap
前提：已知 width值
margin-left: auto;margin-right: auto;
.wrap
設定了絕對定位後，margin：auto就失效了，此時只需加上left: 0;right: 0;即可居中
.wrap
適合固定寬度元素，當瀏覽器寬度小於元素寬度時與margin:auto；有明顯不同
.wrap
寬度未定的情況下水平居中，ie9以下不能使用
.wrap
/* html*/
"wrap">
"box">
/* css*/
.wrap
.box
/* html*/
"wrap">
"box">
/* css*/
.wrap7
.box1
偽類after
vertical-align使同乙個父元素的元素互相垂直居中，而不是根據父元素垂直居中，所以當其中乙個元素的高度跟父元素相同時，其餘元素便會相對父元素垂直居中，但是vertical-align只對行內元素有效，所以子元素最好設定display: inline-block;屬性
/* html*/
"box">
"wrap2">
偽類實現居中
/* css*/
.box
.wrap2
.box::after
/*html*/
"wrap"> 垂直居中
/*css*/
.wrap
.wrap
.wrap
.wrap
利用flex的align-items屬性實現子元素在父元素內的垂直居中，align-self也行
/* html*/
"wrap">
"box">
/* css*/
.wrap
.box
/* html*/
"wrap">
垂直居中
/* css*/
.wrap
p
利用grid的align-items屬性實現子元素在父元素內的垂直居中，align-self也行
/* html*/
"wrap">
"box">
/* css*/
.wrap7
.box1
"wrap">
垂直居中
/* css*/
.wrap
p
父元素使用display: table; 子元素使用display: table-cell;vertical-align: middle;即可
.wrap
box
bootstrap框架將以上水平垂直進行了封裝 ,主要使用網格布局和彈性布局，能夠自適應於台式電腦、平板電腦和手機。對應如下
bootstrap
csstext-center
text-align:center
m-auto
margin:auto
justify-content: center;
justify-content-center;
align-items: center;
align-items-center;
col-offset
offset
CSS筆記（Bootstrap概覽）
移動裝置優先是 bootstrap 3 的最顯著的變化，為了bootstrap可以在移動端確保適當的繪製和觸屏縮放，要在頭部新增viewport meta標籤。bootstrap 包含了乙個響應式的 移動裝置優先的 不固定的網格系統，可以隨著裝置或視口大小的增加而適當地擴充套件到12 列。建立網路系...
Bootstrap與Foundation的區別
整體來說foundation比bootstrap略顯高大上一點，使用的都是比較新的技術，整體觀是以mofile first 移動優先 來考慮的。foundation 使用 border box 盒子模型 box model 即 它定義width 和 height時，border 和 padding是...
CSS之Bootstrap（快速布局）
使用 bootstrap 並不代表不用寫 css 樣式，而是不用寫絕大多數大家都會用到的樣式 en en x ua compatible content ie edge viewport content width device width,initial scale 1 media 判斷條件 針對...