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 class="box">
        <div class="content"></div>
    </div>

(2)宽度和高度未知

  

     <style>
        .box {
            width: 400px;
            height: 200px;
            position: relative;
            background: red;
        }
        .content {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: green;
        }
    </style>

    <div class="box">
        <div class="content"></div>
    </div>

(3)flex布局

  

    <style>
        .box {
            width: 400px;
            height: 200px;
            background: red;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .content {
            width: 200px;
            height: 100px;
            background: green;
        }
    </style>
    <div class="box">
        <div class="content"></div>
    </div>

原文地址:https://www.cnblogs.com/hongchenzimo/p/11080770.html

时间: 2024-10-10 16:53:32

div在父元素内上下左右居中的相关文章

div在父元素中的居中问题

方法一:定位方法 <div class="parent1"> <div class="child1"> content1 </div> </div> .parent1{ position:relative; height:300px; width:300px; } .child1{ position:absolute; top:0px; left:0px; right:0px; bottom:0px; margin:a

div块级元素内文字换行word-wrap, word-break,white-space。

word-wrap: normal; || word-break: normal; 当word-wrap或者word-break为normal时,也就是浏览器的默认设置时. 换行规则是这样的: 情景一: 当一个单词在行尾不能完整容纳时,会自动将这个单词换到下一行,示例如下. 情景二: 当一个长长的单词在行尾不能完整容纳,并且换行后还是不能容纳时,单词就会溢出容器,示例如下. word-wrap: break-word; 当word-wrap设置为break-word时, 换行规则如下:  情景一

搞清Image加载事件(onload)、加载状态(complete)后,实现图片的本地预览,并自适应于父元素内

onload与complete介绍 complete只是HTMLImageElement对象的一个属性,可以判断图片加载完成,不管图片是不是有缓存:而onload则是这个Image对象的load事件回调,当图片加载完成后执行onload绑定的函数. 给下面一个例子,解释下: document.getElementById('load').onclick = function() { var img = new Image(); img.src="images/avatar.png";

假如有一高度自适应的div,父元素高度600px,里面有两个div,一个高度100px,希望另一个填满剩下的高度

原文地址:https://www.cnblogs.com/yuanyuan-1994/p/8984473.html

css:子元素div 上下左右居中方法总结

最近在面试,不停地收到了知识冲击,尤其是对于一些基础的css.html.js问题居多,所以自我也在做反思,今天就css问题,如何让一个子元素div块元素上下左右居中 (以下总结方法,都已得到验证). 情景一:一个浏览器页面中,只有一个div模块,让其上下左右居中 解决方案:  { position:fixed;  left:0; right:0; top:0; bottom:0; margin:auto; } 备注:此处小编使用position:fixed为最佳方案,因为position:fix

元素div 上下左右居中方法总结

情景一:一个浏览器页面中,只有一个div模块,让其上下左右居中 解决方案:  { position:fixed;  left:0; right:0; top:0; bottom:0; margin:auto; } 情景二:一个父元素div,一个已知宽度.高度的子元素div(200*300) 解决方案: 1.position布局 { position:absolute/fixed; top:50%; left:50%; margin-left:-100px; margin-top:-150px;}

让一个元素相对于父元素固定定位

之前在项目中,遇到了一个场景,需要实现相对于父元素的fixed定位:在父元素内拖动滚动条时,"fixed"定位的元素不能滑动,在外层拖动滚动条时,父元素及父元素内的所有元素跟着一起滑动.但是position: fixed是相对于窗口进行的定位,不能直接实现我们需要的效果. 我们想让特定子元素相对于父元素"fixed"定位,也就是说,剩余的子元素不定位.那我们可以分开来想,如果添加一个祖先元素assistor,有两个祖先元素,一个用于辅助定位,一个用于包裹不定位的内容

div元素上下左右居中

1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>div元素上下左右居中</title> 6 <style type=

div内快元素[div,p。。。]居中办法

方法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; hei