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

2022-09-25 11:51:11 字數 1079 閱讀 2804

寬度高度不固定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...