一：水平居中方案：
1、行內元素
設定 text-align:center
2、定寬塊狀元素
設定 左右 margin 值為 auto
3、不定寬塊狀元素
a:在元素外加入 table 標籤（完整的，包括 table、tbody、tr、td），該元素寫在 td 內，然後設定 margin 的值為 auto
b:給該元素設定 displa:inine 方法
c:父元素設定 position:relative 和 left:50%，子元素設定 position:relative 和 left:50%
4、對於多個塊級元素：
對父元素設定 text-align: center；
對子元素設定 display: inline-block；
5、使用 flex 布局
二：垂直居中設定
1、行內元素
單行：設定上下 pandding 相等；
或者設定 line-height 和 height 相等
多行：設定上下 pandding 相等；
父元素設定 display: table-cell; 和 vertical-align: middle;
或者使用 flex 布局；
2、塊級元素：下面前兩種方案，父元素需使用相對布局
父元素已知高度：子元素使用絕對布局 top: 50%，再用負的 margin-top 把子元素往上拉一半的高度；
父元素未知高度：子元素使用絕對布局 position: absolute; top: 50%; transform: translatey(-50%)；
使用 flexbox：選擇方向，justify-content: center;
三：水平垂直居中
定高定寬：
先用絕對布局 top: 50%; left: 50%;，再用和寬高的一半相等的負 margin 把子元素回拉；
高度和寬度未知：
先用絕對布局 top: 50%; left: 50%;，再設定 transform: translate(-50%, -50%)；
使用 flexbox：
justify-content: center; align-items: center;
CSS 居中布局
居中在平時的運用很多，以下簡單做了一些總結。統一 html 格式如下 class container class content contentdiv div 居中效果如下 1.1.1 已知父元素子元素高度 container content 1.1.2 未知父元素高度，已知子元素寬度 高度.con...
CSS居中布局
方式一 css3 transform parent child 方式二 flex 布局 parent 適用於子元素為浮動，絕對定位，內聯元素，均可水平居中。常見的內聯元素有 span,a,img,input,label 等等 parent 此方法同樣適用於 display inline block ...
CSS居中及布局
css中的居中可分為水平居中和垂直居中。水平居中分為行內元素居中和塊狀元素居中兩種情況，而塊狀元素又分為定寬塊狀元素居中和不定寬塊狀元素居中。下面詳細介紹這幾種情況。使用inline block和text aligh實現.parent child 優點 相容性好 缺點 需要同時設定子元素和父元素 使...