CSS居中方式總結

1.text-align:center;

使用以上方式居中是將父級容器中display:inline;的行內元素或者文字進行水平居中。

2.inline-height:(height)值;

使用inline-height時經常和height一起使用，使得內容垂直方向上居中，建議在列表內部的li中使用；

3.margin:auto;

使用margin來居中時，一般是在元素給出了確切的width值，設定margin:auto; 或者 margin: 0 auto; 是一樣的效果：當前的元素將水平居中；

使用margin時，也可以設定 margin-left和margin-right的值相等，也能實現水平居中；

4.position定位居中

根據top和left或者bottom、right進行設定，可使元素水平、垂直居中；但是父級元素必須設定高度；

5.flex盒子

flex容器的flex-align:center;

align-items:center;

justify-cotent:center;

專案屬性的align-self:center;

6.負值margin：

1

.box 67
.box1

以上**可實現元素的水平垂直居中。

CSS居中方式總結

一 水平居中 1 行內元素或者display為inline的塊級元素，前提是子元素沒有float 對父元素設定 text align center 2 塊級元素 已知寬高 1 元素自身設定為 margin 0 auto 2 利用絕對定位和margin結合的方式 elem 3 塊級元素 未知寬高 1 ...

CSS居中方式總結

1.text align center 使用以上方式居中是將父級容器中display inline 的行內元素或者文字進行水平居中。2.inline height height 值 使用inline height時經常和height一起使用，使得內容垂直方向上居中，建議在列表內部的li中使用 3.m...

css居中方式

水平居中的text align center 和 margin 0 auto 前者是針對父元素進行設定而後者則是對子元素。他們起作用的首要條件是子元素必須沒有被float影響。垂直居中的line height 作用在父元素上，當他的值等於父元素的height值時，內部的文字就會自動的垂直居中 萬能p...