水平居中 和 垂直居中 方法總結

水平居中

行內元素：

* 如果父元素是塊級元素，則直接給父元素設定text-align:center;

* 如果父元素是不是塊級元素，先將父元素設定為塊級元素，再給父元素設定text-align:center;

塊級元素:

* 需要誰居中，給其設定 margin: 0 auto

* 父元素設定相對定位，子元素設為： position：absolute;left: 50%;margin-left:-元素寬度的一半

*父元素設定相對定位，子元素設為： position：absolute;left: 50%;transform:translatex(-50%)

* 使用flexbox布局，父元素設定： dispaly: flex;justify-content: center;

垂直居中

行元素：

* 單行的行內元素：設定行高等於高度即可 ling-height= height

*  多行的行內元素： 給父元素設定 display: table-cell;vertical-align: middle

塊級元素:

* 父元素設定相對定位，子元素設定： position:absolute;top: 50%; transform:translatey(-50%);

* 使用flexbox布局，父元素設定：display: flex;align-items: center;

水平垂直居中

已知寬高：

* 設定父元素為相對定位，子元素設定：position:absolute;top:0;left:0;right:0;bottom:0;width: 200px;height:200px;margin:auto;

* 設定父元素為相對定位，子元素設定：position:absolute;left: 50%;top:50%;width:200px;height:200px;margin-top:-100px;margin-left: -100px;

未知寬高：

*設定父元素為相對定位，子元素設定：position:absolute;top: 50%;left:50%;transform:translate(-50%,-50%);

* 使用flexbox布局：父元素設定：display：flex；align-items:center;justify-content:center;

水平居中和垂直居中方法總結

1 行內元素 將父元素設為 text align center 2 不定寬塊級元素 設定display inline和父級text align center 3 定寬塊級元素 設定margin auto 4 相對父元素絕對定位 父元素 position relative 子元素 position a...

垂直居中和水平居中總結

container center 以上 可使塊級子元素水平垂直居中，為inline block的子元素只能垂直居中，若也想其水平垂直居中確保在父元素樣式中新增 text align center。關鍵必須設定其父元素固定寬高。即使有多個子元素也一樣可以垂直水平居中。當子元素都為行內元素 行內元素不能...

垂直水平居中方法總結

今天老大隨口問了這個問爛了的問題，我只回答了兩種，好吧，還是老老實實總結下來加強下記憶吧。一 定位 邊距 固定寬高度適用 container inner 複製 container inner 複製 二 定位 transform 不固定寬高也適用 container inner 複製 三 flex布局...