HTML CSS水平居中方法(持續學習中)

2021-10-18 10:02:06 字數 401 閱讀 1481

適用情況:明確盒子寬度與高度

讓明確寬高的盒子水平垂直居中於視窗:

①position: absolute; 元素會變成塊元素,脫離普通文件流

②top: 0; left: 0; bottom: 0; right: 0; 樣式的塊元素會讓瀏覽器為它包裹一層新的盒子。因此這個元素會填滿它相對父元素(body標籤、設定了position: relative; 樣式的容器)的內部空間。

③設定了寬高:瀏覽器會阻止元素填滿所有的空間,根據margin: auto; 的要求,重新計算幷包裹一層新的盒子。

即塊元素是絕對定位,又脫離了普通文件流,瀏覽器在包裹盒子之前會給margin-top和margi-bottom設定乙個相等的值——使用「完全居中」。

div

各種水平居中方法

1 text algin center 可以使行內元素居中 也可以使塊級元素中的文字居中,但不可以使塊級元素本身居中 2 margin 0 auto 僅可以使塊級元素居中,inline和inline block都不可以。3 絕對定位的居中 left 100px right 100px 左右同時設定相...

HTML水平居中方法

一 對於行內元素採用text align center 的方式 二 採用margin 0 auto 來實現水平居中顯示 三 用table實現 四 塊級的元素但是通過轉換成行內元素來實現塊級元素的水平居中顯示 五 父子元素都採用相對定位,父元素left 50 子元素left 50 相對自己的長度減回5...

CSS垂直居中水平居中方法

center 剛在別人的部落格裡看到這種方法時真的覺得很奇葩,以下是大神的解釋 解釋 1 在普通內容流中,margin auto的效果等同於margin top 0 margin bottom 0。2 position absolute使絕對定位塊跳出了內容流,內容流中的其餘部分渲染時絕對定位部分不...