CSS中多種常見居中方法

2021-09-24 16:33:50 字數 898 閱讀 6119

.container


.container


.container


.center
將上下padding的值相等

.container


.center


class


="parent"


>


>


class


="child"


>


這裡內容會自動居中


td>


tr>


table


>
設定display的值為table-cell，將元素變為**cell顯示

.container
父元素 postion 為 relative 子元素 position 為absolute ，用 transform 屬性居中

.container


.center
目前的主流方式，非常好用，建議用這種

.container


.center
grid布局是一種二維布局方法，能夠在行和列中布置內容。因此在任何網格中都有兩個軸，橫軸（即行軸，內聯）和縱軸（即列軸，塊）。

沿著這些軸，可以使用盒模型對齊規範中定義的屬性對專案進行行對齊和列對齊。

較新的方法，所以有相容問題，未來會越來越常使用

.container


.center

CSS中的多種居中方式

css居中一直是我想要整理記錄的，拖了很久，今天就順便整理一下 是我目前使用最多的一種方式，flex布局也是現在最方便的一種布局，廣泛用於pc端和移動端 containergrid布局是一種比flex更加強大的布局，但是目前兼用性並不好，我使用的並不多，但也能實現居中 container傳統中比較新...

css居中方法

水平居中 1 文字 等行內元素的水平居中 給父元素設定text align center可以實現文字 等行內元素的水平居中。2 確定寬度的塊級元素的水平居中 通過設定margin left auto 和margin right auto 來實現的。3 不確定寬度的塊級元素的水平居中 方法一 將需要居...

css中垂直居中方法

水平居中 text align center 塊級元素水平居中 採取絕對定位方式 自適應塊級元素水平居中 借助css3的變形屬性 transfor 來完成 content 行內元素垂直居中 單行文字的垂直居中 1.元素的寬度和行高相等時，文字呈現垂直居中 多行文字的垂直居中 1.不固定高度的垂直居中...