【div+css】两个div，如何让内层的div在外层div中水平垂直居中

好久没有写样式，很是很生疏

====================================================================

方法1：

.parent {width:800px;height:500px;border:2px solid #000;position:relative;
}.child {width:200px;height:200px;margin: auto;  position: absolute;  top: 0; left: 0; bottom: 0; right: 0; background-color: red;
}

方法2：

        .parent {width:800px;height:500px;border:2px solid #000;display:table-cell;vertical-align:middle;text-align: center;}.child {width:200px;height:200px;display:inline-block;background-color: red;}

方法3：

      .parent {width:800px;height:500px;border:2px solid #000;display:flex;justify-content:center;align-items:center;}.child {width:200px;height:200px;background-color: red;}

方法4：

        .parent {width:800px;height:500px;border:2px solid #000;position:relative;}.child {width:300px;height:200px;margin:auto;position:absolute;/*设定水平和垂直偏移父元素的50%，再根据实际长度将子元素上左挪回一半大小*/left:50%;top:50%;margin-left: -150px;margin-top:-100px;background-color: red;}

转载于:https://www.cnblogs.com/sxdcgaq8080/p/7723751.html

【div+css】两个div，如何让内层的div在外层div中水平垂直居中相关推荐

css图片在盒子里居中,让图片在div盒子中水平垂直居中
//调整多张图片,让图片水平垂直居中 function adjustImg(){ let imgDiv = document.getElementsByClassName("img" ...
DIV+CSS两种盒子模型（W3C盒子与IE盒子）
在辨析两种盒子模型之前.先简单说明一下什么叫盒子模型. 原理: 先说说我们在网页设计中常听的属性名:内容(content).填充(padding).边框(border).边界(margin), CSS ...
如何使img或者div在div中水平垂直居中显示
闲来无事,被人问到如何使img在一个div中垂直居中显示,自己就总结了如下几种方法,供大家参考: 方法一:在box中添加span空元素 <div id="box">&l ...
div在body中水平垂直居中
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
CSS的12中水平垂直居中方法
文章目录一.水平垂直居中的12种方法 1.absolute + 负margin 2. absolute + margin:auto 3.absolute + calc 4.absolute + tr ...
后端开发工程师的DIV+CSS两栏布局入门
padding 导致 width 扩大如果对一个元素同时指定了 width 和 padding, 那么它实际的宽度是 padding-left + padding-right + width, 所以 ...
让行内元素（如图片）在div中水平垂直居中（干货）
(1)第一种:用vertical-align <div class="method1"><span class="tiptop">< ...
一个div在另一个div中水平垂直居中
<meta charset="UTF-8"> <title>div居中</title> </head><style> . ...
CSS:仅对子盒子修饰样式，三种让其在父盒子中水平垂直居中的方法及其优缺点(父盒子宽高未知)
1.给父盒子相对定位,子盒子绝对定位,left,top,right和bottom,都设置为0: position: absolute; left: 0; right: 0; top: 0; botto ...
html css样式div属性,div css
DIV+CSS是WEB设计标准,它是一种网页的布局方法.与传统中通过表格(table)布局定位的方式不同,它可以实现网页页面内容与表现相分离.提起DIV+CSS组合,还要从XHTML说起.XHTML是 ...

【div+css】两个div，如何让内层的div在外层div中水平垂直居中

【div+css】两个div，如何让内层的div在外层div中水平垂直居中相关推荐

最新文章

热门文章