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

深藏阁楼爱情的钟 2022-05-18 01:04 166阅读 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 条评论，166人围观）

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

相关阅读

相关 CSS上下居中左右居中

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

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

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

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

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

相关【css】absolute定位让图片在div中上下左右居中

html <div> <img src="../assets/images/404.gif" alt=""> </div> css

川长思鸟来/ 2022年11月18日 05:53/ 0 赞/ 146 阅读

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

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

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

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

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

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

相关前端开发CSS+DIV

1：li 设置了行高height和line-height，那么字体是居中显示的 2：浮动是用来元素控制在一行显示，绝对定位是元素独立于页面显示，如果没有指定父级pos

àì夳堔傛蜴生んèń/ 2022年06月16日 09:48/ 0 赞/ 148 阅读

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

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

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

相关关于div居中

1.style 内联样式 <div style="width:200px;margin:0 auto;"> 内容 </div> // 由于本人不是多

谁践踏了优雅/ 2022年04月13日 08:53/ 0 赞/ 213 阅读

相关让内容上下左右居中

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

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

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

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

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