CSS中幾種常用的居中方法

2021-08-19 17:45:13 字數 938 閱讀 6573

先看html**：

div2
1.1內聯元素的水平居中

使用text-align:center; css樣式**如下：

.div1 


.div2
其中注釋的幾種方式均有效果

1.2塊級元素水平居中

css**如下：

.div1 


.div2
其中，只需在div2中新增margin： 0 auto；即可。

2.1單行內聯元素垂直居中

html**：

內聯元素
css**：

.div1
關鍵**：line-height = height；需要注意的是，利用行高實現居中並非絕對的垂直居中

3.1方法一

使用絕對定位，css**：

.div1
3.2方法二

使用定位加margin，css**：

.div1
3.3方法三

使用定位加translate，css**：

.div1
注：使用translate要考慮各瀏覽器的相容性。

3.4方法四

使用flex布局，css**：

.div1 


.div2
css居中方法

（一） 前端面試：三欄布局

css常用的幾種居中方式

css常用的幾種居中方式,可以直接拿來用 1,position absolute定位 box 複製 2,position fixed box 複製 3,position fixed,margin auto box 複製 4,position absolute,margin auto box 複製 5...

css的幾種垂直水平居中方法

總結了幾種css居中實現的方式，注 為常用方式，wrap 為容器，div 為要居中的元素。1.絕對定位，寬高都已知的情況下如下 可實現，或者可以使用negative margins div 2.不知道元素的寬高，僅僅實現某個div是其父的1 2，水平垂直居中，隨著父元素的大小等比例放大或者縮小。di...

css居中方法

水平居中 1 文字 等行內元素的水平居中 給父元素設定text align center可以實現文字 等行內元素的水平居中。2 確定寬度的塊級元素的水平居中 通過設定margin left auto 和margin right auto 來實現的。3 不確定寬度的塊級元素的水平居中 方法一 將需要居...