使一个div居中显示的三种方法

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>div居中</title><style>/*第一种方法*/div{width: 200px;height: 200px;background-color: orchid;position: absolute;top: 0;left: 0;right: 0;bottom: 0;margin: auto;}</style>
</head>
<body>
<div></div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>div居中</title><style>/*第二种方法*/div{width: 200px;height: 200px;position: absolute;background-color: orchid;top: 50%;left: 50%;margin-top: -100px;margin-left: -100px;}</style>
</head>
<body>
<div></div>
</body>
</html>

使div2在div1里面居中显示

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>div居中</title><style>/*第三种方法*/#div1 {width: 700px;height: 600px;background-color: orange;display: flex;align-items: center;justify-content: center;}#div2 {width: 200px;height: 200px;background-color: orchid;}</style>
</head>
<body>
<div id="div1"><div id="div2"></div>
</div>
</body>
</html>

使一个div居中显示的三种方法相关推荐

html这一段div居中显示,使一个div居中显示的三种方法
使一个我自址哈这工边识框处己按后大都加控不架的div居中显示比抖朋要插支一圈不者地器享说几的三种方法 1. div居中 /*第一种方法*/ div{ width: 200px; height: 200 ...
如何使一个 div 居中显示
在 chrome 或 FireFox里,使用 body{ margin:0px; padding:0px; } div{ magin:0 auto; } 即可让一个 div 居中显示,但在 IE 里不 ...
css中div居中显示的四种方法
css中设置div元素居中显示的四种方法一.先确定div的基本样式二.具体实现方法第一种:利用子绝父相和margin: auto实现第二种:利用子绝父相和过渡动画tranform实现第三种: ...
使一个div垂直+水平居中的几种方法
前几天去一家互联网公司面试,面试官问到了这个应该算是比较简单的问题,在我自认为回答正确时,才知道这道题的答案有很多种,下面就让我们一起来探讨一下这个问题: 思路1:绝对定位居中(原始版) 这个是我回答 ...
html div显示页面中间,使一个div始终显示在页面中间
使一个div始终显示在页面中间假设我们有一个div层: 首先,我们用css来控制它在水平上始终居中,那么我们的css代码应该是这样: *{margin:0;padding:0;} #myDiv{wi ...
js获取DIV的位置坐标的三种方法！
js获取DIV的位置坐标的三种方法! 方法一: var odiv=document.getElementById('divid'); alert(odiv.getBoundingClientRect( ...
css 图片居中放大,不同比例图片居中缩放显示的三种方法
效果方法一动态给img标签src属性赋值来达到传入不同比例的图片时始终等比例缩放显示,兼容性最好 HTML代码复制代码 CSS代码 .img-box{ /*限定图片盒子宽高*/ width:500 ...
让一个 div 水平垂直居中的几种方法
水平垂直居中有好多种实现方式,主要就分为两类:不定宽高和定宽高,以在body下插入一个div为例: 定宽高使用定位+margin element.style {position: absolute; ...
占满DIV剩余高度的三种方法
第一种,老套路,浮动大法代码: 效果图: 绿色DIV占满了外层DIV 第二种:calc CSS计算代码: 这里在类名为div2的DOM外又加了一层div,主要就是为了说明,如果利用calc(10 ...

使一个div居中显示的三种方法

使一个div居中显示的三种方法

使一个div居中显示的三种方法相关推荐

最新文章

热门文章