使DIV水平和垂直居中

1、原理：要让div等块级元素水平和垂直居中，必需知道该div等块级元素的宽度和高度，然后设置位置为绝对位置，距离页面窗口左边框和上边框的距离设置为50%，这个50%就是指页面窗口的宽度和高度的50%，最后将该div等块级元素分别左移和上移，左移和上移的大小就是该div等块级元素宽度和高度的一半。

.div1{
    position: absolute;
    left:50%;
    top:50%;
    margin-left: -150px;
    margin-top: -150px;
    width:300px;
    height: 300px;
    background: red;
   }

2、利用CSS的margin设置为auto让浏览器自己帮我们水平和垂直居中。

.div1{
    position: absolute;
    left: 0px;
    right: 0;
    top:0;
    bottom: 0;
    margin: auto;
    width:300px;
    height: 300px;
    background: red;
   }

转载于:https://www.cnblogs.com/xiaoan0705/p/8920768.html

使DIV水平和垂直居中相关推荐

CSS、JS 使DIV水平和垂直居中的各种方法
在Web开发中,固定高宽的div在网页中垂直居中很简单,相信大家也很容易的写出来,但是不是固定高宽的div如何垂直居中呢?我们在网页布局,特别是手机等web端网页经常是不固定高宽的div. 在这里,我 ...
如何让DIV水平和垂直居中
2019独角兽企业重金招聘Python工程师标准>>> 我们在设计页面的时候,经常要把DIV居中显示,而且是相对页面窗口水平和垂直方向居中显示,如让登录窗口居中显示.我们传统解决的办 ...
使用css3将一个div水平和垂直居中显示
使用css3将一个div水平和垂直居中显示方案一: div绝对定位水平垂直居中[margin:auto实现绝对定位元素的居中], 代码两个关键点:1.上下左右均0位置定位: 2.margin: au ...
宽高不定div水平、垂直居中
宽高不确定div居中宽高不定的div水平垂直居中在前端页面布局中经常用到,它能够根据当前页面的大小做到自适应,使页面展示更协调:由于比较重要,因此在前端面试的时候此知识点会经常被问到. 水平垂直居中 ...
ie css居中,css实现div水平、垂直居中兼容chrome、ie8
示例1 chrome33.ie8测试通过: 复制代码代码如下: /* 固定宽高div,在浏览器中保持水平.垂直居中 */ #div1 { width:400px; height:300px; posi ...
div图片垂直居中如何使div中图片垂直居中
div相对与table对于图片的垂直居中支持的并不好,特别对于不同浏览器的兼容性来说,这里我们看下一个简洁的css解决方法: 在曾经的淘宝UED 招聘中有这样一道题目: "使用纯CSS ...
使用CSS使div块内容垂直居中的方法
一·line-height 如果内容只有文本,则可以使用line-height属性,值与父级的高度一样就可以实现垂直居中效果二·div块使用margin 可以在该块使用margin或者margin- ...
不定宽高的div水平、垂直居中问题
HTML代码如下: <div id="box"><div id="content"></div> </div> ...
如何让div水平垂直居中
如何让div水平垂直居中 @(css)[妙瞳] 引子我们经常遇到需要把div中的内容进行水平和垂直居中.所以,这里介绍一种方法,可以使div水平居中和垂直居中. 代码: <!DOCTYPE h ...

使DIV水平和垂直居中

使DIV水平和垂直居中相关推荐

最新文章

热门文章