寬度高度不固定div的水平居中演示如下:
水平居中**:
html部分
123css部分
.container
.center
.center /*針對ie6 hack*/
.center a
程式設計客棧
**要點:
父容器container加css屬性 text-align:center;
子容器center加css屬性display:inline-block;
.center 為針對ie6的hack
寬度高度不固定的div垂直居中演示如下:
垂直居中**:
html部分
我們垂直居中了,我們水平居中了
css部分
#vc
#vci
#content
**要點:
父容器vc的css屬性 display:table;overflow:hidden;
子容器vci的css屬性 vertical-align:middle;display:table-cell;
針對ie6的h容器的 _position:absolute;_top:50%; 和content容器的 _position:relative; _top:-50%;
如果不需要水平居中的話,需要注釋掉vci容器的text-align:center;_left:50%;以及content的display:inline-block;_left:-50%;
寬度高度固定的div垂直居中和水平居中
html部分
居中了css部分
.guding
.gd**要點
父容器要用相對定位position:relative;否則的話子元素會相對於瀏覽器視窗進行絕對定位。
子容器絕對定位,top:50%;left:50%;margin-top,margin-left的值取該容器高度,寬度的一半的負值。
如果相對於瀏覽器視窗做水平垂直居中的話,比如需要大背景居中,**如下
本文標題: 寬度高度不固定的div 如何水平居中以及垂直居中
本文位址:
我們垂直居中了,我們水平居中了
寬度高度不固定的div,如何水平居中以及垂直居中
水平居中 html部分12 3css部分 container center center 針對ie6 hack center a 要點 父容器container加css屬性 text align center 子容器center加css屬性display inline block center 為針...
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...