垂直居中的4種方法 筆記整理

2021-10-03 21:41:43 字數 1003 閱讀 7187

一、對於寬高固定的div

方法1：定位 50% margin 負距

**如下(一下**都是在style中)：

.box
tips：調整中心點： 一開始div的中心點在左上角 要想垂直居中，就要調整到div的中心 即一半寬度一半高度的位置上。

方法2: 定位 四方位為0 margin:auto (最簡單的一種方式)

**如下(一下**都是在style中)：

.box
tips：用定位 來定義四個方位 將盒子拉扯開 對四個方向都能做出調整 然後margin:auto 對頁面自適應達到垂直居中效果

二、對於寬高不固定的div

方法3: 定位 利用css3中的transform屬性

.box
tips：運用了css3的transform屬性進行了x軸 y軸的移動 再用定位的left top來調整 這種方法不論div寬高怎麼改變 都是垂直居中的。

三、flex布局

方法4: 利用css3中的flex布局

.box
tips: 運用了css3種的flex布局 flex在pc端 移動端 響應式頁面都是非常好用 常見的一種布局方式，但是要注意的是：設為flex布局後，子元素的float、clear、vertical-align屬性將失效。

flex布局詳情請看（菜鳥教程flex布局語法解釋）：

希望能幫助到你們，對我也是乙個總結溫習的過程0.0 hahaha~

垂直居中的6種方法

利用css進行元素的水平居中，比較簡單，行級元素設定其父元素的text align center，塊級元素設定其本身的left 和 right margins為auto即可。本文收集了六種利用css進行元素的垂直居中的方法，每一種適用於不同的情況，在實際的使用過程中選擇某一種方法即可。試用 單行文字...

16種方法實現水平居中垂直居中

1 若是行內元素,給其父元素設定 text align center,即可實現行內元素水平居中.2 若是塊級元素,該元素設定 margin 0 auto即可.3 若子元素包含 float left 屬性,為了讓子元素水平居中,則可讓父元素寬度設定為fit content,並且配合margin,作如下...

16種方法實現水平居中垂直居中

熟悉水平居中和垂直居中的方法,不為別的,就為用的時候能夠信手拈來.下面直接步入正題.原文 16種方法實現水平居中垂直居中 1 若是行內元素,給其父元素設定 text align center,即可實現行內元素水平居中.2 若是塊級元素,該元素設定 margin 0 auto即可.3 若子元素包含 f...