13518219792
容器的居中顯示在網頁設計中是很常見的，居中顯示可以獲得視覺的焦點，是內容更加突出，下面就簡單的說明一下如何在HTML中通過樣式的控制來實現
10余年的遼陽網站建設經驗，針對設計、前端、開發、售后、文案、推廣等六對一服務，響應快，48小時及時工作處理。全網整合營銷推廣的優勢是能夠根據用戶設備顯示端的尺寸不同，自動調整遼陽建站的顯示方式，使網站能夠適用不同顯示終端，在瀏覽器中調整網站的寬度，無論在任何一種瀏覽器上瀏覽網站，都能展現優雅布局與設計，從而大程度地提升瀏覽體驗。創新互聯公司從事“遼陽網站設計”,“遼陽網站推廣”以來，每個客戶項目都認真落實執行。
01
最常見的一種，代碼示例如下圖，首先，取big一半像素大小賦給small層，通過margin: 0 auto; text-align: center來實現
02
第二種方法，代碼示例如下圖，將big層的display設置為table-cell,然后small層的margin-left取（500-250）/2，也就是125即可
03
第三種方法，代碼示例如下圖，將big層的position設置為absolute，然后small層的margin-left取（500-250）/2，也就是125即可
04
第四種方法，通過display:flex實現，代碼示例如下圖，big層display:flex;flex-direction:column;而small層align-self:center
05
第五種方法，在small層的寬度沒有的時候，可以通過width:fit-content這個設置來完成，代碼示例如下
06
第六種方法，通過display:inline-block來實現，將這個設置賦給big層即可，代碼示例如下圖
07
第七種方法，設置big層position:relative，相對情況下，使small層左浮動，代碼示例如下
08
第八種方法，transform屬性，代碼示例如下
09
第九種方法，借助第三方樣式，比如增加一個add節點，水平浮動向左，使small層隨之浮動，代碼示例如下
特別提示
每種方法都適應不同的運行環境，實際操作時需要考慮不同瀏覽器的解析時的兼容性
前言：根據最近學習的課程，簡單總結一下學習到的css左右布局以及居中方案。后期學習深入之后再回來進行css居中的完整總結。
給所有子元素添加 float: left ，給父元素加 clearfix 類，清除浮動
html:
css:
將內聯元素外部的塊級元素的 text-align 設置為 center ，即可實現內聯元素（ inline 、 inline-block ）的水平居中。
演示
將固定寬度的塊級元素的 margin-left 和 margin-right 設置為 auto ，即可實現塊級元素的水平居中。
演示
將每個塊級元素的 display 設置為 inline-block ，然后將它們的父容器的 text-align 設置為 center ，即可使多個塊級元素水平居中。
演示
設置內聯元素的行高（ line-heigt ）和內聯元素的父元素的高度（ height ）相等，且內聯元素的字體大小遠小于行高，即可使內聯元素垂直居中。
演示
通過絕對定位元素距離頂部50%，并設置margin-top向上偏移元素高度的一半，即可實現垂直居中。
演示
借助CSS3中的transform屬性向Y軸反向偏移50%的方法實現垂直居中
演示
1.橫向居中
（1）方法一
position:?fixed;
/*?居中對齊begin?*/
left:?50%;
/*?兼容老版本的方法?*/
-webkit-transform:?translateX(-50%);
transform:?translateX(-50%);
（2）方法二
設置固定寬度，并且設置margin：auto
（3）方法三
position:?fixed;
left:?50% - 居中盒子寬度的50%;
2.縱向居中
(1) 高度和行高設置一樣
height: 100px;
line-height:100px;
3.橫向和縱向都居中
display:?flex;
/*?默認的主軸是x軸row,?justify-content:?center?沿著主軸居中對齊?*/
justify-content:?center;
/*?我們需要一個側軸居中?*/
align-items:?center;
