首页 > 编程知识 正文

div上下左右布局(div上下左右居中的方法)

时间:2023-05-03 22:19:43 阅读:82227 作者:1425

内容导读

如果父div的行高于自己的高度,则内部文字间元素将显示在上下中心。 行中块的高度不固定时,也会显示在上下中央。 所以有必要调整父div的线高度。 使用定位属性(顶部、左侧、右侧、底部)百分比的模式。 100%时,偏移长度为父div高度(宽度)的100%。 位置属性top和bottom或left和right的值分别设置为0,但子div有固定的高度(宽度),上下(左右)的间隔不能为0。 如果将子div设置为margin:auto,则会显示在中间。

从喜欢JS的无名车站转载

例如,一个父母div(w:100; h:400px )二级div ) h:400px; 100帕; 中显示了当前的缩放比例。 将其上下左右居中。

方法一(varticle-align)

理念

使用表格单元格的中心属性。

步骤

将div放置在父div之外,同时将其设定为“显示:表”。 宽度是100%

父div被设定为表的单元格元素(显示:表单元格)

父div将属性“垂直对齐:中间”设置为子div位于上下中心

子div以margin配置位于左右中央(margin-left:auto; 边缘光:自动)

例子

样式

* * {马克龙:0; 填充: 0; 盒子缩放:边框; }

.表{显示:表}; width :百分之百; }

. father {显示:表单元}; 垂直对齐:中间; }

. son { margin :自动; }

/样式

主体

div类='表'

divclass=' father ' style=' width :100 %; height: 400px; border :1 pxsolidrebeccapurple;'

divclass=' son ' style=' width :100 px; height: 100px; 背景:地块绿色;' /div

/div

/div

/body注:

的单元格特殊,如果只有一个单元格,则缺省情况下,其宽度为父(table|tr )宽度的100%;

table的缺省宽度不会增加。 width:100%;

方法二(line-height)

理念

如果父div的行高于自己的高度,则内部文字间元素将显示在上下中心。 行中块的高度不固定时,也会显示在上下中央。 文本居中对齐属性text-align:center允许在左右居中显示行内元素或行内块元素。

步骤

子div是内联模块要素(display :内联模块);

父div设定行高,使子div位于上下中心

父div配置文本的中心(text-align:center )将子div放置在左右中心。

斯泰尔斯

* * {马克龙:0; 填充: 0; 盒子缩放:边框; }

. father {line-height: 500px 文本对齐:中心; 字体大小:0; }

. son {显示:在线模块};

/*显示器:线上弹性;

显示:在线网格;

显示器:在线表; */

}

/样式

主体

divclass=' father ' style=' width :100 %; height: 400px; border :1 pxsolidrebeccapurple;'

divclass=' son ' style=' width :100 px; height: 100px; 背景:地块绿色;' /div

/div

/body注意:如果将行高设置为当前父div的高度(400px ),则具有固定高度的子div不会显示在中间。 问题是,默认情况下,浏览器位于文本的中心,即作为文本的一部分。 (颜色缺省字体大小:16 px; hight:21px () )进行了定中,设为高度100px,没有进行定中。 所以有必要调整父div的线高度。 字体大小:0 (对应的字体高度为0 )时,在线高度上显示副div的高度(400px 100px; 中显示了当前的缩放比例。

方法三(定位)

理念

使用定位属性(顶部、左侧、右侧、底部)百分比的模式。 100%时,表示偏移的长度

为父div的高度(宽度)的100%。

步骤

父div标记下定位(position:relative|absolute|fixed);子div绝对定位(position:absolute)

子div上下居中:top:50%;margin-top:-h/2; 或是 bottom:50%;margin-bottom:-h/2;;

子div左右居中: left:50%;margin-left:-w/2 或是 right:50%;margin-right:-w/2;

例子

<style> * {margin: 0; padding: 0; box-sizing: border-box;} .father {position: relative;} .son {position: absolute;bottom:50%;margin-bottom: -50px;left: 50%;margin-left: -50px; } </style> <body> <div class="father" style="width: 100%; height: 400px; border: 1px solid rebeccapurple;"> <div class="son" style="width: 100px; height: 100px;background: palegreen;"></div> </div> </body>

方法四(定位)

理念:

定位属性top和bottom(或是left和right)值分别设置为0,但子div有固定高度(宽度),并不能达到上下(左右)间距为0,此时给子div设置margin:auto会使它居中显示。

步骤:

父div标记下定位(position:relative|absolute|fixed|sticky);子div绝对定位(position:absolute)

子div上下居中:top:0;bottom:0;margin-top:auto;margin-bottom:auto

子div左右居中:left:0;right:0;margin-left:auto;margin-right:auto

例子

<style> * {margin: 0; padding: 0; box-sizing: border-box;} .father {position: relative;} .son {position: absolute; top: 0; bottom:0; left: 0; right: 0; margin: auto} </style> <body> <div class="father" style="width: 100%; height: 400px; border: 1px solid rebeccapurple;"> <div class="son" style="width: 100px; height: 100px;background: palegreen;"></div> </div> </body>

方法五(flex)

理念

弹性盒子,自带的一个居中功能

例子

<style> * {margin: 0; padding: 0; box-sizing: border-box;} .father {display: flex; align-items: center} .son {margin: auto} </style> <body> <div class="father" style="width: 100%; height: 400px; border: 1px solid rebeccapurple;"> <div class="son" style="width: 100px; height: 100px;background: palegreen;"></div> </div> </body>

flex兼容性,以及存在的已知问题

结尾

方法二和方法三兼容性要比其它好些

参考资料

Can I usecss-vertical-center-solutionCSS实现垂直居中的5种方法--前端观察

版权声明:该文观点仅代表作者本人。处理文章:请发送邮件至 三1五14八八95#扣扣.com 举报,一经查实,本站将立刻删除。