CSS 我常用到的一些居中方法

2021-09-25 06:39:20 字數 886 閱讀 6408

普通行高居中,使用line-height, text-align

text

.tx
塊狀元素水平居中,使用margin:0 auto;

.img
flex布局居中

.flex-box
.flex-box
使用絕對定位居中

/*

* 假設.pos-r 行高100px

* .label 行高20px, 寬度20px

* .label 作為乙個標籤需要顯示在右邊且垂直居中

*/.pos-r

.pos-r .label

如果高度不確定,則使用transform

/*

* 假設.pos-r 行高100px

* .label 行高20px, 寬度20px

* .label 作為乙個標籤需要顯示在右邊且垂直居中

*/.pos-r

.pos-r .label

影象內容顯示的垂直水平居中

(1)使用img本身屬性

.img
(2)使用背景的形式

.img

CSS中幾種常用的居中方法

先看html div2 1.1內聯元素的水平居中 使用text align center css樣式 如下 div1 div2其中注釋的幾種方式均有效果 1.2塊級元素水平居中 css 如下 div1 div2其中,只需在div2中新增margin 0 auto 即可。2.1單行內聯元素垂直居中 h...

css常用的居中方式

常用的居中方式 這種居中方式可以水平居中塊級元素中的行內元素inline,inline block text align center display inline block width 100px 居中 但是這個方法居中塊級元素中的塊級元素時,如果div中的div設定了自己的寬度,那麼只能居中,...

JavaScript 用到的一些常用方法總結

1 判斷兩個物件是否相等 different obj1,obj2 if object.keys obj1 length object.keys obj2 length for var attr in obj1 else if obj1 attr obj2 attr return true 2 複製乙...