css文字 盒子 浮動居中方法總結

（二）盒子居中

（三）浮動居中

這是文字居中

text-align

: center;

line-height

:"容器高度"
這是父盒子

這是子盒子
自動調整左右的外邊距margin來實現水平居中，當然需要注意的是子盒子是有寬度的

#parent

#son
1、首先父盒子要先相對定位，然後子盒子再絕對定位，如果父盒子不相對定位，那麼子盒子的絕對定位就會脫離父盒子定位；

2、子盒子的絕對定位是以左上角為原點移動的，所以left: 50% 和 top: 50% 只是根據左上角為原點來居中的，而沒有使子盒子中心整體居中；
3、所以需要分別縮小外邊距margin-left和margin-top到子盒子寬度和高度的一半，也就相當於原點移動到了子盒子正中心；

#parent

#son
定位和方法2一樣， 而translate(-50%,-50%) 作用是，往上（x軸）,左（y軸）移動自身長寬的 50%，以使其居於中心位置。

#parent

#son
1、這種辦法是使父元素內的子元素橫向排列，然後分別水平和垂直居中

2、需要注意的是如果父盒子內有多個元素，那麼將根據這多個元素橫向排列的總寬度來居中，其中心位於總寬度的一半
#parent

#son

1、如果想要垂直排列，我們可以加上 flex-direction: column;

2、當然，其居中原理是根據多個垂直排列元素的總高度來居中的，其中心位於總高度的一半
盒子居中方法
css實現盒子模型水平居中 垂直居中 水平垂直居中的多種方法 水平居中效果圖 水平居中 全域性樣式 parent child 第一種 margin width 這種方法適用於已經知道width的盒子，實現起來比較簡單 child 第二種 text align inline block 這種方法適用於...
CSS文字和div垂直居中方法總結
在樣式布局中，我們經常碰到需要將元素居中。通過css實現元素的水平居中較為簡單 對文字，只需要對其父級元素設定text align center 而對div等塊級元素，只需要設定其left和right的margin值為auto。要實現元素的垂直居中，有人會想到css中的vertical align屬...
CSS元素居中方法總結
css實現元素居中。1 使用position absolute,設定left top margin left margin top的屬性 one 這種方法基本瀏覽器都能夠相容，不足之處就是需要固定寬高。2 使用position fixed,同樣設定left top margin left margi...