寬度高度不固定的div,如何水平居中以及垂直居中

2022-07-17 13:33:17 字數 1173 閱讀 5343

水平居中**:

html部分12

3css部分

.container

.center

.center /*針對ie6 hack*/

.center a

**要點:

父容器container加css屬性 text-align:center;

子容器center加css屬性display:inline-block;

.center 為針對ie6的hack

垂直居中**:

html部分

我們垂直居中了,我們水平居中了

css部分

#vc

#vci

#content

**要點:

父容器vc的css屬性 display:table;overflow:hidden;

子容器vci的css屬性 vertical-align:middle;display:table-cell;

針對ie6的hack,vci容器的 _position:absolute;_top:50%; 和content容器的 _position:relative; _top:-50%;

如果不需要水平居中的話,需要注釋掉vci容器的text-align:center;_left:50%;以及content的display:inline-block;_left:-50%;

html部分

居中了css部分

.guding

.gd**要點

父容器要用相對定位position:relative;否則的話子元素會相對於瀏覽器視窗進行絕對定位。

子容器絕對定位,top:50%;left:50%;margin-top,margin-left的值取該容器高度,寬度的一半的負值。

如果相對於瀏覽器視窗做水平垂直居中的話,比如需要大背景居中,**如下

寬度高度不固定的div 如何水平居中以及垂直居中

寬度高度不固定div的水平居中演示如下 水平居中 html部分 123css部分 container center center 針對ie6 hack center a 程式設計客棧 要點 父容器container加css屬性 text align center 子容器center加css屬性dis...

div(固定寬度和不固定寬度)居中顯示的方法總結

今天我總結一下css實現div居中的方法,有的是固定寬度的,還有的是不固定寬度的。1.使用自動外邊距實現div css居中 css中首選的讓元素水平居中的方法就是使用margin屬性 將元素的margin left和margin right屬性設定為auto即可。在實際使用中,我們可以為這些需要居中...

div(固定寬度和不固定寬度)居中顯示的方法總結

1.使用自動外邊距實現div css居中 css中首選的讓元素水平居中的方法就是使用margin屬性 將元素的margin left和margin right屬性設定為auto即可。在實際使用中,我們可以為這些需要居中的元素建立乙個起容器作用的div。需要特別注意的一點就是,必須為該容器指定寬度 1...