在html中怎么让一个div（包含里面的内容）垂直和水平居中
html中让一个DIV在另一个DIV中水平垂直居中，可以通过将一个div包裹第二个div，然后在将设置第一个div的宽高，要比第二大上很多，然后在设置第二个的宽高，然后通过margin：auto auto；这里我提交代码:
文字测试
#test{
width:800px;
height:400px;
border:1px solid #f00;
}
#test1{
width:400px;
height:200px;
border:1px solid #0f0;
margin:auto auto;
}
我是第二个div
说明，本文中所指的DIV包括HTML页面中所有的元素。
让一个DIV水平居中，直接用CSS就可以做到。只要设置了DIV的宽度，然后使用margin设置边距0
auto，CSS自动算出左右边距，使得DIV居中。
.mydiv{margin:0auto;width:300px;height:200px;}但是如果要使DIV垂直方向也居中，恐怕CSS需要修改了。
CSS实现水平和垂直居中
要让DIV水平和垂直居中，必需知道该DIV得宽度和高度，然后设置位置为绝对位置，距离页面窗口左边框和上边框的距离设置为50%，这个50%就是指页面窗口的宽度和高度的50%，最后将该DIV分别左移和上移，左移和上移的大小就是该DIV宽度和高度的一半。
.mydiv{width:300px;height:200px;position:absolute;left:50%;top:50%;margin:-100px00-150px}该方法使用普遍，但是前提是必需设置DIV的宽度和高度。如果当页面DIV宽度和高度是动态的，比方说需要弹出一个DIV层并且要居中显示，DIV的内容是动态的，所以宽度和高度也是动态的，这时需要用jQuery可以解决居中。
jQuery实现水平和垂直居中
jQuery实现水平和垂直居中的原理就是通过jQuery设置DIV的CSS，获取DIV的左、上的边距偏移量，边距偏移量的算法就是用页面窗口的宽度减去该DIV得宽度，得到的值再除以2即左偏移量，右偏移量算法相同。注意DIV的CSS设置要在resize()方法中完成，就是每次改变窗口大小时，都要执行设置DIV的CSS，代码如下：
$(window).resize(function(){$(
".mydiv"
).css({position:"absolute",
left:($(window).width()-$(
".mydiv"
).outerWidth())/2,
top:($(window).height()-$(
".mydiv"
).outerHeight())/2});});此外在页面载入时，就需要调用resize()。$(function(){
$(window).resize();});此方法的好处就是不需要知道DIV的具体宽度和高度大小，直接用jQuery就可以实现水平和垂直居中，而且兼容各浏览器，这个方法在很多的弹出层效果中应用。
没有太好的上下居中方法，兼容性最好的方式是用JS来计算DIV的高度，然后取浏览器窗口高度的一半-DIV高度=给DIV上部margin赋值。
有一种变通方式是把DIV改为TABLE，外层是一个一行一列，宽高100%的TABLE，然后给个table的TD设置为上下左右居中。
水平居中，可以用margin：0
auto;垂直居中用js动态固定，下面是我做的一个动态改变位置的代码，可以参考下：
var
contentWidth
=
window.screen.availWidth;
var
mainHeight
=
$(window).width();
var
nowHeight
=
$(window).outerWidth(true);
$('.yr_introduce').css("margin-left",(nowHeight
-
1903)/2);
答：DIV 没有太好的上下居中方法，兼容性最好的方式是用JS来计算DIV的高度，然后取浏览器窗口高度的一半-DIV高度=给DIV上部margin赋值。有一种变通方式是把DIV改为TABLE，外层是一个一行一列，宽高100%的TABLE，然后给个table的TD设置为上下左右居中。
答：1、使用浮动float 代码：<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>div同行显示</title> <style type="text/css"> container{overflow: hidden;}/* 清除浮动 */ container div{width:200px;height:100px;} .box1{background: red;flo...
答：1、使用css中的flaot属性就可以了，首先打开Dreamweaver，创建html文件：2、然后先给页面设置背景颜色，创建段落两个段落，段落上面设置2张图片的float属性，分别让它们左右浮动，值为left和right，最后打开浏览器：3、打开浏览器后即可看到效果，两张图片分别浮动在文本的左右两边，文字则是围绕在图片周围 ...
答：1、用一个div包含两个p标签，给p标签设置小于div一半的宽度（中间有间隔）并添加左浮动和右浮动（类似两篇文章左右各一篇）；2、如果是一段文字分左右两列显示，注意是“两列”，这个需要用css3的里面的column，具体方法可直接百度“css3 分列布局”；两种不同方法看你需要哪个 有用的话记得采纳哦，...
答：设置div样式 z-index:auto auto可定义为一个值(整数数字)，越大代表越置前，如可定义为： z-index:999。前提是div是定位元素代码实例如下：1、<html> 2、 <body> 3、<style type="text/css"> 3、.div1{ width: 200px; height: 100px; background: red; float: left; } 5、.div2{ ...
答：举例如下：在以下示例中，将演示页面左右两侧分别放置一个高度为500像素，宽度为200像素的浮动窗口。示例中使用的定位方式为：固定定位（fixed），所有它们将永远的跟随页面进行滚动。HTML代码：<div id="left"> <p>我是左侧浮动窗口的内容</p></div><div id="right"> <p>我是右侧浮动窗口...
答：是不是说反了？背景图随着窗口缩放而自适应，div写width百分比。
答：1、新建html文档，在body标签中添加一个div标签，然后在这个div标签中添加一些div标签：2、为外div标签和内div标签添加一些样式，由于div元素是块级元素，所以内div会在外div中垂直排列：3、为内div添加“display: inline-block;”样式，这时内div就会变成行级块元素，这样内div就会在div中横向排列了：...
答：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> /*div1下面 包含着1个图片和1段文字*/ #div1{ position: relative;/*相对定位*/ width: 267px; height: 140px; } /*图片部分的设置*/ #img1{ /*position: static;默认定位,可以省略*/ widt...
答：给要添加背景的div添加background样式 div { background:url(../images/pic1.jpg) no-repeat 10px 20px; } 其中10px是横坐标距离，20px纵坐标距离。
