水平居中
1.若是行內元素,給其父元素設定text-align:center,即可實現行內元素水平居中.
2.若是塊級元素,給元素設定margin:0 auto;即可.
3.若子元素包含float:left屬性,為了讓子元素水平居中,則可讓父元素寬度設定為fit-content,並且配合margin,作如下設定:
.parent
fit-content是css3中給width屬性新加的乙個屬性值,它配合margin可以輕鬆實現水平居中,目前他只支援chrome和firefox瀏覽器;
4.使用flex 2023年版本布局,可以輕鬆實現水平居中,子元素設定如下:
.son
5.使用css3新增的transform屬性,子元素設定如下:
.son
6.使用絕對定位,以及負值的margin-left自身寬度的一半
7.使用絕對定位的方式,以及left:0;right:0;margin:0 auto;子元素設定如下:
.son
垂直居中
*元素高度不定
1.若是元素為單行文字,則可設定line-height等於父元素的高度;
2.若元素是塊級元素,基本思想是使用display:inline-block,vertical-align:middle和乙個偽元素,讓內容塊居於容器的**;
.parent::after, .son
.parent::after
這是一種很流行的方法,也適應ie7;
3.可以使用vertical-align屬性,而vertical-align只有在父層為td或者是th時,才會生效,對於其他塊元素,例如div,p等,預設是不支援的,為了使用該屬性,我們需要設定父元素
display:table,子元素diplay:table-cell;vertical-align:middle;
優點:元素高度可以動態改變,不需要在css中定義,如果父元素沒有足夠的空間時,該元素內容也不會被截斷;
缺點:ie6-7,甚至ie8 beta中無效;
4.可以使用flex 2012版,這是未來css布局的趨勢,flexbox是css3新增屬性,設定初衷是為了解決像垂直居中這樣常見的布局問題;
父元素作如下設定即可保證子元素垂直居中:
.parent
優點:內容塊的寬高任意,優雅的溢位 可用於更複雜高階的布局技術中
缺點;ie8/9不支援 需要新增瀏覽器廠商字首 渲染上可能會有一些問題
5.使用flex 2009版;
.parent
優點:實現簡單,擴充套件性強
缺點:相容性差,不支援ie
6.可以使用transform,設定父元素相對定位,子元素設定如下css樣式:
.son
優點：**量少
缺點：ie8不支援,屬性需要追加瀏覽器廠商字首,可能出現干擾其他transform效果,某些情況下會出現文字或元素邊界渲染模糊的現象;
*元素高度固定
7.設定父元素相對定位,子元素設定如下的css樣式
.son
優點:適用於所有的瀏覽器
缺點:父元素高度不夠時,子元素可能不可見(當瀏覽器視窗縮小時,滾動條不出現時),如果子元素設定了overflow:auto,則高度不夠時,會出現滾動條;
8.設定父元素相對定位,子元素css樣式如下:
.son
優點:簡單
缺點:沒有足夠的空間時, 子元素會被截斷,但不會有滾動條;
總結:flex,盒模型,transform,絕對定位,這幾種方法同時適用於水平居中和垂直居中;
css 水平居中 垂直居中 水平垂直居中
一 水平居中 1 行內元素水平居中text align center 2 塊級元素水平居中margin 0 auto 3 多個塊狀元素的水平居中 實現多個水平排列的塊狀元素的水平居中，是將要水平排列的塊狀元素設為display inline block，然後在父級元素上設定text align ce...
css水平居中 垂直居中 水平垂直居中
css水平居中 垂直居中 水平垂直居中 水平居中 行內元素 block text align 塊級元素 方案一 分寬度定不定兩種情況 定寬度 margin 0 auto 作用 使盒子自己居中，意思是上下距離為0，auto就是左右自適應兩邊距離 不定寬度 設定子元素display inline blo...
垂直居中和水平居中總結
container center 以上 可使塊級子元素水平垂直居中，為inline block的子元素只能垂直居中，若也想其水平垂直居中確保在父元素樣式中新增 text align center。關鍵必須設定其父元素固定寬高。即使有多個子元素也一樣可以垂直水平居中。當子元素都為行內元素 行內元素不能...