作為乙個前端工程師，修改專案的樣式是必不可少的，所以本部落格會講水平居中和垂直居中講解一下
一、對於
行內元素
：text-align:center;
二、對於
確定寬度的塊級
元素：（1）
margin和width實現水平居中
常用(前提：
已設定width值)：
margin-left:auto; margin-right:auto;
（2） 絕對定位和margin-left: -(寬度值/2)實現水平居中
固定寬度塊級元素水平居中，通過使用
絕對定位，以及
設定元素margin-left為其寬度的一半
.content
（3） position:absolute + （left=0+top=0+right=0+bottom=0） + margin:auto
.content
三、對於
未知寬度的塊級
元素：（1）
table標籤配合margin左右auto實現水平居中
使用 table標籤（或直接將塊級元素設值為display:table），再通過給該標籤新增
左右margin為auto
（2） inline-block實現水平居中方法
display：inline-block;（或display:inline）和text-align:center;實現水平居中
存在問題：需額外處理inline-block的瀏覽器相容性（
解決inline-block元素的空白間距
）（3）
絕對定位實現水平居中
.content
（3）相對定位實現水平居中
.contentparent
/*目標元素*/
.content
（4）浮動實現水平居中的方法
.contentparent
/*目標元素*/
.content
（5）css3的flex實現水平居中方法
.contentparent
.content
（6）css3的fit-content配合左右margin為auto實現水平居中方法
.content
CSS 垂直居中和水平居中
position relative width 500px height 500px background color ddd content background color 6699ff width 50 height 50 position absolute top 25 left 25 這兩...
CSS垂直居中和水平居中
總括 css居中一直是乙個比較敏感的話題，為了以後開發的方便，樓主覺得確實需要總結一下了，總的來說，居中問題分為垂直居中和水平居中，實際上水平居中是很簡單的，但垂直居中的方式和方法就千奇百怪了。人生用物，各有天限 夏澇太多，必有秋旱。水平居中設定 行內元素 設定 text align center ...
CSS 水平居中和垂直居中
1 水平居中 行內元素 text align center 2 水平居中 定寬塊狀元素 margin auto，滿足定寬和塊狀兩個條件的元素是可以通過設定 左右margin 值為 auto 來實現居中的。3 水平居中 不定寬塊狀元素 不定寬度的塊狀元素有三種方法居中 這三種方法目前使用的都很多 1 ...