div在body中水平垂直居中

<!DOCTYPE html>

<head>

<title>水平垂直居中与body</title>

</head>

<body>

绝对定位上下左右都是0px，margin使用auto

</div>

使用css3的 flex模式 justify-content:center aligin-items:center模式居中，但这个有点不适合在body中垂直水平居中，因为如果body都设置这种模式，那它里面的元素都水平垂直剧终了

</div>

使用绝对定位 left50% top50% 然后 margin-left:div宽度高度一半 margin-top:div高度一半,

这种需要知道本身的width height

</div>

使用绝对定位然后使用transform(-50%,-50%),进行移动，这种方法，不需要知道宽高,

我不需要知道宽高

</div>

</body>

</html>

--css

margin: 0px;

padding: 0px;

}

html,body{

width: 100%;

height: 100%;

}

.absolute0marginauto{

width: 100px;

height: 100px;

position: absolute;

top: 0px;

bottom: 0px;

left: 0px;

right: 0px;

margin: auto;

background: brown;

}

.flexcenterparent{

width: 300px;

height: 300px;

display: flex;

justify-content: center;

align-items: center;

border: 2px solid red;

}

.flexcentersub{

width: 200px;

height: 200px;

border: 2px solid blue;

}

.marginwidhthalf{

width: 200px;

height: 200px;

border: 2px solid violet;

position: absolute;

left: 50%;

top: 50%;

margin-left: -100px;

margin-top: -100px;

}

.absolutetransform{

border: 4px solid darkmagenta;

color: darkorange;

position: absolute;

top: 50%;/*这个的50%是父元素的50%,二translate 50%是div本身的50%*/

left: 50%;

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

}

顺便说下文在在div中水平居中，使用 text-algin:center 垂直居中line-height:divheight

div在body中水平垂直居中相关推荐

css图片在盒子里居中,让图片在div盒子中水平垂直居中
//调整多张图片,让图片水平垂直居中 function adjustImg(){ let imgDiv = document.getElementsByClassName("img" ...
子盒子在父盒子中水平垂直居中
子盒子在父盒子中水平垂直居中的几种实现方式. 方式一:margin; HTML:  <div class="father"&g ...
div水平垂直居中 div相对于父元素水平垂直居中 div相对于网页水平垂直居中
div相对于父元素水平垂直居中(相对网页水平垂直居中在下面) 弹性布局父元素作为容器设置宽高.弹性布局.水平轴和交叉轴居中 display:flex; justify-content:center; ...
css 垂直居中_html中div使用CSS实现水平/垂直居中的多种方式
CSS中的居中,在工作中,会经常遇到.它可以分为水平居中和垂直居中,以下是几种实现居中的方式. 以下例子中,涉及到的CSS属性值. .parent-frame { width: 200px; heig ...
html中位div添加水平线,html中div使用CSS实现水平/垂直居中的多种方式
CSS中的居中,在工作中,会经常遇到.它可以分为水平居中和垂直居中,以下是几种实现居中的方式. 以下例子中,涉及到的CSS属性值. .parent-frame { width: 200px; heig ...
在html中div水平垂直css,html中div使用CSS实现水平/垂直居中的多种方式
CSS中的居中,在工作中,会经常遇到.它可以分为水平居中和垂直居中,以下是几种实现居中的方式. git 查看源码配合在线预览,效果更佳以下例子中,涉及到的CSS属性值. .parent-frame ...
vue之div让文字内容水平垂直居中
思想 ①让文字先垂直居中,再水平居中: ②若遇到文字和div一起水平垂直居中,则外面再套一个div,先让它俩都垂直居中,再内部处理文字水平居中. 代码 line-height: 100px; // 控 ...
CSS的12中水平垂直居中方法
文章目录一.水平垂直居中的12种方法 1.absolute + 负margin 2. absolute + margin:auto 3.absolute + calc 4.absolute + tr ...
让div在body中水平和垂直居中
我们在设计页面的时候,经常要把DIV居中显示,而且是相对页面窗口水平和垂直方向居中显示,如让登录窗口居中显示.我们传统解决的办法是用纯CSS来让DIV居中.在本文中,我将给大家讲述如何用CSS和jQu ...

div在body中水平垂直居中

div在body中水平垂直居中相关推荐

最新文章

热门文章