html中div屏幕居中,实现DIV屏幕居中

第一种方法:

CSS代码 :

.dv1{

height:200px;

width: 200px;

border:1px solid red;

position: absolute;

top: 0px;

left: 0px;

right: 0px;

bottom: 0px;

margin: auto;

}

HTML代码 :

第二种方法:

css代码 :

.dv1{

height:200px;

width: 200px;

position: absolute;

}

html代码 :

JS代码 :

var a=document.querySelector('div')

//获取浏览器可视区的高度

var height=document.documentElement.clientHeight;

// 获取可视区域的宽度

var widht=document.documentElement.clientWidth;

//获取div的高度

var gao=a.offsetHeight;

//获取div的宽度

var kuan=a.offsetWidth;

//设置上下距离

var sgao=(height-gao)/2+'px'

//设置左右距离

var sgoo2=(widht-kuan)/2+'px'

a.style.top=sgao

a.style.left=sgoo2

第三种方法 :

HTML代码 :

CSS代码 :

dv1{

height:200px;

width: 200px;

border:1px solid red;

position: absolute;

text-align: center;

left:50%;

top:50%;

margin-left:-100px;

margin-top:-100px;

}

优点 :

良好的跨浏览器特性，兼容IE6-IE7。

代码量少。

缺点 :

不能自适应。不支持百分比尺寸和min-/max-属性设置。

内容可能溢出容器。

边距大小与padding,和是否定义box-sizing: border-box有关，计算需要根据不同情况

第四种方法 :

HTML代码 :

CSS代码 :

div {

width: 200px;

height: 200px;

border: 1px solid red;

position: absolute;

left: 50%;

top: 50%;

transform: translate(-50%, -50%);

}

优点：

内容可变高度

代码量少

缺点：

IE8不支持

属性需要写浏览器厂商前缀

可能干扰其他transform效果

某些情形下会出现文本或元素边界渲染模糊的现象

html中div屏幕居中,实现DIV屏幕居中相关推荐

【CSS】一个DIV在另一个DIV上下左右居中和在屏幕居中（示例）
实现效果: 代码: <!DOCTYPE html> <html lang="en"><head><meta charset="U ...
【CSS】一个div在另外一个div中居中显示（水平居中，竖直居中）
一个div在另外一个div中居中显示(水平居中,竖直居中) 方法1: 通过设置子元素绝对定位和margin:auto .parent {position:relative;width:800px;he ...
[css] 怎么让div中的图片和文字同时上下居中？
[css] 怎么让div中的图片和文字同时上下居中? <div><img src="./"/><label>文字内容</label> ...
div居中以及div中的元素居中
div水平和垂直居中,text-align和vertical-align不起作用,因为标签div没有这两个属性,所以再css中设置这两个值不能居中的效果. 1. div水平居中:设置margin的左右 ...
【VUE】web高德地图海量点标记,全部居中显示在屏幕中
Map类的setBounds方法可以重新调整视角,让所有点标记全部居中显示在屏幕中.亲测有效,整理了一下笔记如下: https://lbs.amap.com/api/javascript-api/re ...
如何用css实现div高度自适应占满屏幕
如何用css实现div高度自适应占满屏幕不能使用准确的px值,应该用%作为尺寸的单位. 在样式表中将html,body的高度height设置为100% 在要需要站满屏的div设置width:100% ...
浅析移动DIV盒子自动测算电脑屏幕XY坐标显示
<!DOCTYPE html> <html> <head runat="server"> <meta charset="utf- ...
在div中设置文字与内部div垂直居中
要实现如图一所示的结果: html代码如下: <!DOCTYPE html> <html><head lang="zh"><meta ht ...
html中两个div垂直居中对齐,在div中垂直居中的两个元素
桃花长相依如何对元素进行垂直.水平或两者的居中这里有两种在div中对div进行中心化的方法.一种使用CSS的方法柔性箱另一种方式是使用CSS工作台和定位财产.在这两种情况下,居中的div的高度都可以 ...
div css将文字居中显示图片,css文字居中、图片居中、div居中解决方案
一.文字居中若文字只有一行文本只有一行 .box { width: 200px; height: 200px; background-color: red; } .text { line-heig ...

html中div屏幕居中,实现DIV屏幕居中

html中div屏幕居中,实现DIV屏幕居中相关推荐

最新文章

热门文章