CSS水平居中和垂直居中的實現方式

2022-09-07 02:42:13 字數 406 閱讀 4563

方案二:使用定位屬性,首先設定父元素為相對定位,再設定子元素為絕對定位,設定子元素的 left:50%; 即讓子元素的左上角水平居中;

方案三:使用flexbox布局實現

方案二:使用flexbox布局,只需要給待處理的塊級元素的父元素新增屬性:display:flex; align-items:center;

<

style

>

#father

#son

style

>

<

div

id="father"

>

<

div

id="son"

>我是塊級元素

div>

div>

** 

CSS實現水平居中和垂直居中

行內元素 為父元素設定中 text align center 樣式 style text align center 行內元素水平居中span div 定寬塊級元素 定義元素左右margin為auto style width 100px height 100px background color gr...

CSS 垂直居中和水平居中

position relative width 500px height 500px background color ddd content background color 6699ff width 50 height 50 position absolute top 25 left 25 這兩...

CSS垂直居中和水平居中

總括 css居中一直是乙個比較敏感的話題,為了以後開發的方便,樓主覺得確實需要總結一下了,總的來說,居中問題分為垂直居中和水平居中,實際上水平居中是很簡單的,但垂直居中的方式和方法就千奇百怪了。人生用物,各有天限 夏澇太多,必有秋旱。水平居中設定 行內元素 設定 text align center ...