利用負邊距實現子元素居中(相對于父元素(position:relative))，需已知子元素的width與height；且把子元素的position設為absolute，絕對定位；以及設定left和top為50%；再加上負邊距，margin-left值為width的一半，同樣的，margin-top值為height的一半。
我們來理解一下，絕對定位的子元素，通過自身的邊界來相對于父元素進行定位，這個邊界就是margin，當我們設定了left和top各為50%時，子元素左邊界距父元素左邊界50%,上邊界距父元素上邊界50%，其實此時，我們可以知道，子元素的左上角這個點，是水平垂直居中的，當我們設了負邊距時，我們可以理解為這個子元素向右向上各移了自身長度的一半，這就達到了水平垂直居中。當然我們也可以這麼理解，其實真正相對于父元素來定位的點就是子元素左上角的點，當我們設了負邊距，子元素的中心點就取代了它左上角的點，若希望子元素能水平垂直居中，這時只需再設left和top各為50%時便可。
**如下：
使用絕對定位方式, 以及left:0;right:0;top:0;bottom:0;margin:auto
當我們為子元素設定left:0;right:0;top:0;bottom:0;時，瀏覽器將給子元素重新分配乙個邊界框，此時子元素將填充其父元素的所有可用空間，當我們給子元素設定乙個width或height，防止子元素佔據所有的可用空間，瀏覽器將根據新的邊界框重新計算，再加上margin:auto,由於被絕對定位，脫離了正常的文件流，瀏覽器會給margin-left,margin-right相同的值，margin-top,margin-bottom相同的值，使元素塊在父元素中水平垂直居中。
**如下:
flex布局即為彈性布局，只需將父元素設定三個屬性即可(display,justify-content,align-items)
**如下：
css3中新增的transform屬性, **如下：
模擬**效果:
1.利用負邊距方法優點是具有良好的跨瀏覽器特性，相容ie6/ie7，但是缺點是不能自適應，需設定子元素的寬高，不支援百分比，且負邊距值與padding和是否定義box-sizing: border-box有關，計算需要根據不同情況。
2.利用margin:auto方法支援跨瀏覽器，支援百分比，但是必須宣告子元素的width或height(至少一項，不然會佔據父元素所有空間)。
這兩種絕對定位方法，可在子元素中，設定overflow:auto來防止內容越界溢位。
3.利用flex或transform方法的好處是**量少，且你不用設定子元素的width與height,內容可由子元素裡的子元素任意撐開，優雅地溢位。但flex ie8/ie9不支援，transform ie8不支援，且屬性需要寫瀏覽器廠商字首。
4.table方法的好處是沒有空間的限制，可以根據元素內容動態的改變高度，素的內容不會因為沒足夠的空間而被切斷或者出現難看的滾動條。但在ie6-7下無法正常執行，結構也更複雜。
5.html結構如下:
6.實驗結果如下：(實現了子元素的水平垂直居中，同時可觀察到兩張圖溢位的方式不同)
絕對定位的溢位(overflow:auto)：
flex或transform或table的溢位：
CSS實現元素水平居中 垂直居中 水平垂直居中
1.元素水平居中 1.1行內元素水平居中 1.2塊級元素水平居中 1.2.1定寬塊級元素的水平居中 1.2.2不定寬塊級元素水平居中 2.元素垂直居中 2.1 單行文字垂直居中 2.2 多行文字垂直居中 2.3塊級元素垂直居中 3.元素水平垂直居中 像文字text 影象img 按鈕等行內元素要實現水...
css實現元素垂直水平居中
css實現垂直居中的方法 方法一 父元素display flex 子元素margin auto auto fa son 方法二 父元素display flex 並設定justify content center align items center fa son 方法三 在不改變父元素的前提下，只修...
純css實現元素水平垂直居中
在前端頁面布局的時候，我們需要對某個元素進行相對於其父元素或整個文件進行水平垂直居中的顯示布局。而如何快速的運用css進行相對於的布局，這裡，總結了三種方法。這裡父元素只需要給它乙個定位的屬性就行，在子元素下設定相對定位，這裡有兩種寫法，第一種就是沒有注釋的，把left，right，top，bott...