在前端頁面布局的時候，我們需要對某個元素進行相對於其父元素或整個文件進行水平垂直居中的顯示布局。
而如何快速的運用css進行相對於的布局，這裡，總結了三種方法。
這裡父元素只需要給它乙個定位的屬性就行，在子元素下設定相對定位，這裡有兩種寫法，第一種就是沒有注釋的，把left，right，top，bottom設定為0，再設定margin為auto即可。第二種就是已經注釋的，設定left和top為50%，因為是相對於元素的右上角為原點的，這裡就需要再通過translate偏移自身寬高的一半來使它正好位於父元素的中心。這裡不建議使用第二種，在第二種的情況下，如果再需要使用transform的其他屬性，如rotate，會產生一些bug。而效果如下：
這裡用的是display，display設為table-cell，在設定vertical-align為middle，這設定的是垂直居中，text-align設定為center設定的是水平的居中。這裡需要注意兩點，vertical-align只有在設定了display為table-cell時才有效。text-align只有在子元素不為塊級元素時才有用，即子元素設定display為inline-block。（補充：這裡也可以不用text-align，那麼就需要在子元素下設定margin：auto）
這一種使用的是彈性布局，把父元素設定為容器display：flex；在容器中設定專案在主軸的對其方式justify-content：center，設定在交叉軸的對齊方式為align-items：center。
以上都是在不知道元素寬高情況下實現的，如果知道元素寬高，則可以通過margin等計算來實現。
CSS實現元素水平居中 垂直居中 水平垂直居中
1.元素水平居中 1.1行內元素水平居中 1.2塊級元素水平居中 1.2.1定寬塊級元素的水平居中 1.2.2不定寬塊級元素水平居中 2.元素垂直居中 2.1 單行文字垂直居中 2.2 多行文字垂直居中 2.3塊級元素垂直居中 3.元素水平垂直居中 像文字text 影象img 按鈕等行內元素要實現水...
css實現元素水平垂直居中
利用負邊距實現子元素居中 相對于父元素 position relative 需已知子元素的width與height 且把子元素的position設為absolute，絕對定位 以及設定left和top為50 再加上負邊距，margin left值為width的一半，同樣的，margin top值為h...
css實現元素垂直水平居中
css實現垂直居中的方法 方法一 父元素display flex 子元素margin auto auto fa son 方法二 父元素display flex 並設定justify content center align items center fa son 方法三 在不改變父元素的前提下，只修...