前端开发之div上下左右居中

深藏阁楼爱情的钟 2022-05-18 01:04 178阅读 0赞

情景一：一个浏览器页面中，只有一个div模块，让其上下左右居中

解决方案：  \{ position:fixed;

left:0;

right:0;

top:0;

bottom:0;

margin:auto; \}

备注：此处小编使用position:fixed为最佳方案，因为position：fixed定位是相对于整个浏览器页面的。

情景二：一个父元素div，一个已知宽度、高度的子元素div(200\*300)

解决方案： 1、position布局

\{

position:absolute/fixed;

top:50%;

left:50%;

margin-left:-100px;

margin-top:-150px;

\}

情景三:一个父元素div，一个未知宽度、高度的子元素div

解决方案： 1、position布局，position设为absolute，其他同情景一

2、display：table

父级元素：\{ display:table;\}

子级元素： \{ display:table-cell;vertical-align:middle \}

3、flex布局

父级元素：\{ display:flex;flex-direction:row;justify-content:center;align-items:center;\}

子级元素：\{flex:1\}

4、translate

position: absolute;  
　　　　　　　　　　　　top: 50%;  
　　　　　　　　　　　　left: 50%;  
　　　　　　　　　　　　-webkit-transform: translate(-50%, -50%);  
　　　　　　　　　　　　-moz-transform: translate(-50%, -50%);  
　　　　　　　　　　　　-ms-transform: translate(-50%, -50%);  
　　　　　　　　　　　　-o-transform: translate(-50%, -50%);  
　　　　　　　　　　　　transform: translate(-50%, -50%);

发表评论取消回复

表情：

评论列表（有 0 条评论，178人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS上下居中左右居中

一、 > 1、容器内部元素上下左右居中 > 2、内部元素每行的高度以最高的为准 <div style="margin-top: 10px;

一时失言乱红尘/ 2024年03月22日 15:07/ 0 赞/ 87 阅读

相关 html DI在DIV中上下左右居中

要在HTML中实现上下左右居中，可以使用CSS的Flexbox布局或Grid布局。下面是两种方法的示例代码：使用Flexbox布局：使用Grid布局：这两种方法都将

偏执的太偏执、/ 2024年02月21日 12:02/ 0 赞/ 63 阅读

相关 div内容居中(div块内容居中)

如何让div内容居中？让div文字居中如果要让DIV中的文字居中，就得用到文字对齐方式代码text-align:center，这个居中默认为水平居中，详细代码写法如下：

男娘i/ 2023年09月26日 11:56/ 0 赞/ 66 阅读

相关 div居中显示(div在页面居中显示)

如何使div中div的内容居中显示 ![Image 1][] 超链接其中是为了让超链接换行 ; padding-top:\\px;是为了垂直居中，具体是多少

冷不防/ 2023年09月26日 11:56/ 0 赞/ 109 阅读

相关 div上下左右居中.全面总结

这个[使用line-height+inline-block做多行文字的垂直居中。][line-height_inline-block] 还有这个[css 多列等高等宽布局][

深藏阁楼爱情的钟/ 2023年02月10日 05:23/ 0 赞/ 10 阅读

相关【前端学习】CSS——div垂直水平居中

> Author：Vivi > Time：2021-06-04 采用四种方式实习div块级元素垂直水平居中： ①position定位（子绝父相） ②positio

r囧r小猫/ 2022年10月18日 00:58/ 0 赞/ 236 阅读

相关 DIV CSS字体居中实现DIV文字水平左右居中

> DIV CSS字体居中实现DIV CSS文字水平左右居中-css+div字体文字内容居中篇，使用DIV CSS实现字体居中的CSS样式单词为text-align，其值为ce

淩亂°似流年/ 2022年08月03日 15:40/ 0 赞/ 327 阅读

相关前端开发之div上下左右居中

情景一：一个浏览器页面中，只有一个div模块，让其上下左右居中　　　　　　解决方案： \{ position:fixed; 　　　　　　　　　　　　 left:0;

深藏阁楼爱情的钟/ 2022年05月18日 01:04/ 0 赞/ 179 阅读

相关让内容上下左右居中

让盒子中的内容上下左右居中。在盒子上添加样式 display:flex; 在需要居中的元素上添加： margin: auto; 即可；若想让

灰太狼/ 2021年12月12日 08:09/ 0 赞/ 332 阅读

相关 CSS让DIV上下左右居中的方法

示例：一个父div(w:100%;h:400px)中有一个子div(w:100px;h:100px;)。让其上下左右居中。 1、使用varticle-align属性

Bertha 。/ 2021年09月20日 06:40/ 0 赞/ 478 阅读