如何让一个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:300px;
border:1px solid red;
}
.child{
position:absolute;
width:450px;
height:198px;
left:50%;
top:50%;
margin-left:-225px;
margin-top:-99px;
}
</style>

效果如下图:

时间： 2024-08-24 08:27:36

如何让一个div在另一个div中绝对居中（水平+垂直）的相关文章

每天一个JavaScript实例-从一个div元素删除一个段落

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>每天一个JavaScript实例-从一个div元素删除一个段落</title> <style> p{ padding:20px; margin:10px 0; width:

怎样把一个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:

改变div属性的一个实例

<style>#outer{width:500px;margin:0 auto;padding:0;text-align:center;}#div1{width:100px;height:100px;background:black;margin:10px auto;display:block;}</style> <script>var changeStyle = function (elem, attr, value){ elem.style[attr] = valu

WEB前端面试题 分别使用2个、3个、5个DIV画出一个大的红十字

[html] view plain copy <!DOCTYPE html> <!--两个DIV--> <html> <body> <div style="width:100%;height:200px;margin-top:500px;location:center;border:none;background-color:red;position:absolute"> </div> <div style=

div中放入一个img元素导致div高度会多出几个像素

在写代码的时候经常遇到这样一个问题,如果div里嵌套一个img元素且div的高度是由img的高度来撑开,那么div的高度总会比img的高度多3px.好了,废话不多说,直接给大家上代码. html代码: <div id = "header"> <img src="img/header.png"/> </div> css代码: #header{ width : 400px ; border : 1px solid #000 ; /*

div+css画一个小猪佩奇

用DIV+CSS画一个小猪佩奇,挺可爱的,嘻嘻. HTML部分(全是DIV) <!-- 小猪佩奇整体容器 --> <div class="pig_container"> <!-- 尾巴 --> <div class="tail_left"></div> <div class="tail_right"></div> <div class="tail_

【二次元的CSS】—— 用 DIV + LESS 做一个小黄人构造器

仅仅使用div作为身体的布局,用css3的各种transform和圆角属性来绘制各个细节的形状,当然也不会使用任何图片哦.那就没意思了. 有的同学说,用canvas不是能画得更逼真而且更简单吗?这点我也非常赞同,但我的理由还是,那就没意思了. 这次用到了一些LESS的特性,通过设置一些指定的参数来生成不同种类.不同身材的小黄人. GitHub传送门:https://github.com/lancer07/css3Minons 效果是这个样子的 首先 先做个标准版的(ps:也就是图中的第一个小黄人

把一个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

jquery效果，多个div，点击任何一个div，那么这个div会切换文字，变换背景颜色，再次点击其他的div ,这个div会发生刚才的变化，之前点击的div的颜色会变回来

首先css样式: /*原来的背景色*/ .bg { background:'red' } /*需要切换的背景色*/ .bg_click { background:'green' } JS: $('div').on('click',function(){ var $div = $(this); var $others = $div.siblings(); if($div.hasClass('bg')){ $div.removeClass('bg').addClass('bg_click').htm

一个定高，一个高度自适应的布局

Problem:父元素内包含两个子元素,一个定高,另一个高度自适应 Ans: <div class="box">    <div class="ele1"></div>    <div class="ele2"></div></div> (1)  .box {      width:200px;      height:300px;      background:red;