div宽高不确定,在父元素div中居中。

第一种方法

 1 <div class="parent">
 2     <div class="child"></div>
 3 </div>
 4
 5 <style>
 6     .parent {
 7         display: flex;
 8         width: 100%;
 9         height: 300px;
10         background: #cecece;
11         align-items: center; /* 垂直居中 */
12         justify-content: center; /* 水平居中 */
13     }
14     .child {
15         background: #000;
16         width: 200px;
17         height: 100px;
18     }
19 </style>

第二种方法

 1 <div class="x1">
 2     <div class="x2">
 3     </div>
 4 </div>
 5
 6 <style>
 7     .x1 {
 8         width: 1000px;
 9         height: 1000px;
10         position: relative;
11         background: #000;
12     }
13     .x2 {
14         width: 20px;
15         height: 20px;
16         margin: auto;
17         top: 0;
18         left: 0;
19         right: 0;
20         bottom: 0;
21         position: absolute;
22         background: #fff;
23     }
24 </style>

原文地址:https://www.cnblogs.com/daidechong/p/11308162.html

时间: 2024-08-29 16:40:47

div宽高不确定,在父元素div中居中。的相关文章

CSS子元素居中(父元素宽高已知,子元素未知)

<style> .container{width:400px; height:400px; position:relative;} .center{position:absolute; left:0; top:0; bottom:0; right:0; margin:auto; width:50px; height:50px; //宽高可以不写 } </style> <div class="container"> <div class=&quo

兼容性— IE6下子元素宽高会撑大父级

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .box{ width: 200px; height: 200px; border:10px solid black; } .content{ width: 400px; height: 400p

父元素div清除浮动的三种方式

第一种做法: 父元素也设置:浮动 <style> div.b{ float:left; } div.c{ float:left; width:250px; height:100px; } div.d{ float:right; width:250px; height:100px; } </style> <div class="b"> <div class="c"></div> <div class=&

子div用了float浮动之后,如何撑开父元素,让父元素div自动适应高度的问题

方法一: html: <div id="all1"> <div id="left1">1</div> <div id="left2">1</div> <div style=" clear:both; "></div> </div> css: #left1{ float:left;width:200px;} #left2{ float

两栏自适应布局,右侧div宽高不定

.main,.sitebar{ height: 300px; font: bolder 20px/300px "微软雅黑"; color: black; text-align: center; } .main{ width: 100%; float: left; } .main .content{ margin-left: 200px; background: red; } .sitebar{ width: 200px; float: left; margin-left: -100%;

div 宽高相等2种实现方式

div.wh{ background:#ff0;width:50%;position:relative;display:inline-block; } div.wh:before{ content: ""; display: inline-block; padding-bottom: 100%; width: .1px; vertical-align: middle; } div.wh{ background:#ff0; display:inline-block; width:50%;

div在父元素内上下左右居中

(1)宽度和高度已知的 .box { width: 400px; height: 200px; position: relative; background: red; } .content { width: 200px; height: 100px; position: absolute; top: 50%; left: 50%; margin-left: -100px; margin-top: -50px; background: green; } </style> <div cla

解决ul下的li换行问题,(父元素div加overflow:scroll没作用的问题)

#left, #right { width: 50%; box-sizing: border-box; min-height: 100%; float: left; overflow: scroll;//必须写} #left ul{ float: left;//必须写 display:flex;//必须写 }#left ul > li { display:inline-block;//必须写 list-style: none; box-sizing: border-box; float: lef

各种情况上JS获取元素宽高

各种情况下JS获取元素宽高 为了叙述简单,这里仅拿width示例. 情景一,元素style属性设置了width/height <div style="width:996px">test<div><script> var div = document.getElementsByTagName('div')[0]; alert(div.style.width);</script>默认分类 如上,使用el.style.width即可. 如果没有