美文网首页
让未知大小的盒子居中

让未知大小的盒子居中

作者: YT_Zou | 来源:发表于2017-01-13 14:24 被阅读0次
方法1:

css:

 #box1 {            
     position: relative;            
     width: 600px;
     height: 600px;
     background: pink; 
 }
 #box2 {
     position: absolute;
     width: 300px;
     height: 300px;
     background: yellowgreen;
     top: 0;
     left: 0;
     bottom: 0;
     right: 0;
     margin: auto;
 }

html:

<body>
<div id="box1">
    <div id="box2">
    </div>
</div>
</body>
方法2:

使用CSS3属性

    #box2 {
         position: absolute;
         width: 300px;
         height: 300px;
         background: yellowgreen;
         top: 50%;
         left: 50%;
         transform: translate(-50% -50%);
        }

相关文章

  • 让未知大小的盒子居中

    方法1: css: html: 方法2: 使用CSS3属性

  • 前端学习第三天- margin和浮动

    想让盒子(div)居中 1 让盒子中的内容居中--文本或者行内,行内块元素水平居中: 让盒子本身水平居中,而不是内...

  • 2020-09-07

    子元素如何居中的几种方法 1. 已知盒子大小: 1) 子盒子:定位+margin(position:...

  • 3、单行文字垂直居中的代码

    单行文字垂直居中的代码 解决方案:让文字的行高等于盒子的高度 就可以让文字在当前盒子内垂直居中。

  • 水平垂直居中

    问题:怎样实现一个盒子在未知容器里面水平垂直居中? 方法:首先盒子有个宽高,然后给盒子一个定位(相对或者绝对),设...

  • CSS基础第五天

    1、定位的盒子居中显示 ★:margin:0 auto; 只能让标准流的盒子居中对齐。★定位的盒子居中:先左右走...

  • 元素水平垂直居中

    1.已经大小的元素在浏览器可视窗口中水平垂直居中 代码 效果: 2、未知大小的元素在浏览器可视窗口中水平垂直居中 ...

  • 补充

    如果图片超出父空间、想让图片居中 子绝父相 图片超出父空间如何让图片居中 1.设置父盒子为相对定位 子盒子绝对定位...

  • CSS篇-CSS小技巧与注意手记(一)

    ①盒子水平居中注意 可以让一个盒子实现水平居中,需要满足一下两个条件:必须是块级元素。盒子必须指定了宽度(widt...

  • 平时积累小技巧

    1、style样式累加 2、自动在主轴上居中: margin:auto; 会让盒子在主轴自动居中 3、

网友评论

      本文标题:让未知大小的盒子居中

      本文链接:https://www.haomeiwen.com/subject/dqlsbttx.html