DIV在另一个DIV里面垂直居中,水平居中

HTML:

 <div class="parent">
        <div class="children">
            <div class="close">
                <img src="image/ico/icon-close.png" />
            </div>
        </div>
    </div>

CSS:

   <style type="text/css">
        .parent {
            width:800px;
            height:800px;
            background:#286921;
             position:relative;
        }
        .children {
            border:3px #fff solid;
            width:80px;
            height:80px;
            margin:auto;
            top: 0; left: 0; bottom: 0; right: 0;
            position: absolute;
        }
        .close {

        }
    </style>
时间: 2024-08-15 03:21:08

DIV在另一个DIV里面垂直居中,水平居中的相关文章

怎样把一个DIV放到另一个div右下角???

借助CSS定位来实现,你将右下角的那个DIV放在另一个DIV里面,参考代码如下示: <div id="box1"> <div id="box2">测试内容</div> </div> <style> <!-- #box1{width:600px;height:600px;background:green;position:relative} #box1 #box2{width:200px;height:

CSS中div覆盖另一个div

将一个div覆盖在另一个div上有两种手段:一是设置margin为负值,二是设置绝对定位. 可以根个人情况设置z-index的值 1->position 为absolute的情况 <html> <head> <style> #div1{position:absolute;width:300px;height:300px;background:#ccc;} #div2{position:absolute;left:0;top:0;width:200px;height

把一个DIV放到另一个div右下角

父对象相对定位,子对象以父对象为参考点绝对定位:外层的div设置为相对定位,内层的div设置为绝对定位: 1 <div id="box1"> 2 <div id="box2">测试内容</div> 3 </div> 4 <style> 5 <!-- 6 #box1{width:600px;height:600px;background:green;position:relative} 7 #box1

一个div在另一个div中垂直居中的方法

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

How To Put Arrows at the Bottom of a Div(给一个div元素下边加个向下箭头的方法)

You'll only need HTML and CSS to make this element.(这个方法只需要用到html和css) The HTML is simple. All you need is a div element with a class name. Here's what that looks like:(先写个div元素,再给他加个类,就像下边这样) <div class="bottom-arrow"></div> The sty

如何让一个div在另一个div中绝对居中(水平+垂直)

html: <html> <head></head> <body> <div class="parent"> <div class="child"></div> </div> </body> </html> css: <style> .parent{ position:relative; width:600px; height:300p

将一个div置于另一个div之上

div piao置于div bg之上 <div class="bg"> <div class="piao" style="background:url(skin/images2/department/jxdt.png) no-repeat;line-height:28px;">教学动态</div> </div> css .piao {position:absolute;left:15px;top:-

Div中嵌套一个div,怎么是里面的div居中?

盒子居中是在写样式中经常遇到的问题,在这里说个我经常使用的方法~ 利用绝对定位:

如何动态添加和删除一个div

代码实例如下: <!DOCTYPE html><html><head><meta charset="utf-8"><meta name="author" content="http://www.51texiao.cn/" /><title>蚂蚁部落</title><style type="text/css">#father{  wi