css元素水平垂直居中常用彙總

2021-09-08 02:23:04 字數 798 閱讀 3414

請您移步我的新個人部落格: 謝謝！

最常用的是：

margin:0 auto;
若居中無效的原因：

1、元素沒設定寬度

2、設定寬度還無效，那設定的是行內元素，轉block後者inline-block

父元素：position:relative;

子元素:position:absolute;

left:50%;

top:50%;

.box 


.content
此時，子元素左上角處於中心點；如下圖：

然後通過

margin:-50px 0 0 -50px將子元素向左，向上分別移動子元素寬高的一半。即可整體實現水平垂直居中。

.box 


.content
若元素寬度未知，將2中margin換為transform：translate(-50%,-50%)

``父元素：

display:flex;


justify-content:center;


align-items:center;
完整**如下：

.box 


.content

CSS實現元素水平居中 垂直居中 水平垂直居中

1.元素水平居中 1.1行內元素水平居中 1.2塊級元素水平居中 1.2.1定寬塊級元素的水平居中 1.2.2不定寬塊級元素水平居中 2.元素垂直居中 2.1 單行文字垂直居中 2.2 多行文字垂直居中 2.3塊級元素垂直居中 3.元素水平垂直居中 像文字text 影象img 按鈕等行內元素要實現水...

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...