div盒子的居中

<html>
<title>XXXX</title>
<meta charset="utf-8" />
<style type="text/css">
*{
margin:0px;
padding:0px;
}

#content{
width:400px;
height:600px;
border:1px solid red;  /*边框样式*/
position:absolute;
top:50%;
left:50%;
margin-top:-300px;  /* -301px;*/
margin-left:-200px;  /*-201px*/
}
</style>
<body>
     <div id="content">
         ......
     </div>
</body>
</html>

时间： 2024-10-12 22:37:21

div盒子的居中的相关文章

div垂直居中 css div盒子上下垂直居中

div垂直居中 css div盒子上下垂直居中,让DIV盒子在任何浏览器中任何分辨率的显示屏浏览器中处于水平居中和上下垂直居中. div垂直居中常用于单个盒子,如一个页面里只有一个登录布局,使用div css让这个登录布局水平和css垂直居中. 这里介绍一种最简单兼容性最好的水平居中与上下垂直居中的方法. 1.具体实例代码如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> &

div盒子水平、垂直居中

一.div文本的水平居中:margin:0 auto; 垂直居中:line-height:80px;注释:这里line-height的值要和div的高一致. 二:div盒子居中给最外面的父元素设置宽高给要水平垂直居中的div加定位 location { width:200px; height:200px; background-color: #00FF00; position: relative; top: 50%; left: 50%; margin-top: -100px; margi

div盒子水平居垂直中的几种方法

div盒子水平居垂直中的几种方法<!DOCTYPE html><html> <head> <mete charset="utf-8"/> <style> *{ margin: 0; padding: 0; } /*方案1.使用transforms属性的translate

div块上下左右居中

实现div块的上下左右居中: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>div块上下左右居中</title> </head> <body> <div id="div2"> </div> <style> *{p

常用布局，div竖直居中

常用两列布局,多列布局和div竖直居中 body { margin: 0; padding: 0; } .w200 { width: 200px; } .mar-left200 { margin-left: 200px; } .red { background-color: red; } .middle { vertical-align: middle; } .block { width: 80%; height: 300px; border: 1px solid #eee; margin: 0

div盒子究竟占多大面积

div:width---300px,height---300px,border---50px,padding---50px,margin---50px 实际的宽度是:300(width)+50(padding-left)+50(padding-right)+50(border-left)+50(border-right)+50(margin-left)+50(margin-right); 实际高度:300(height)+50(padding-top)+50(padding-bottom)+50

DIV横向排列_CSS如何让多个div盒子并排同行显示

如何让多个div盒子并排同行div横向排列显示呢? 我们先设置3个div盒子对象,什么css样式都不设置看看效果.代码如下: 三个div盒子均独占一行显示 div盒子本身默认样式属性是独占一行,而解决div独占一行方法通常有两种,一种为设置浮动,另外一种为设置display样式.接下来为大家通过文章+图片+案例方法介绍解决div盒子对象并排横向排列且同行显示方法. 一.使用css float并排显示我们对div设置一个float浮动属性即可解决不并排显示,只要你的并排div盒子总宽度小于或等于

DIV CSS固定宽度居中实例

DIV CSS固定宽度居中布局实例在布局一个网页时,非常重要的是一般网页主体布局都是水平居中的,其实就是对最外的DIV层设置居中布局,这时布局居中就是我们这里要介绍关键点. DIV布局水平居中,关键使用CSS单词为margin:0 auto.解释:DIV对象外边距左右为自动适应距离(根据对象设置宽度样式自动判断浏览器除去设置宽度后剩下宽度左右自动对等自然就实现布局居中),上下间距为0px. 关键实例CSS代码: body{ text-align:center} .box{ margin:0 a

div中图片居中

<html> <head> <style> .box { /*非IE的主流浏览器识别的垂直居中的方法*/ display: table-cell; vertical-align:middle; /*设置水平居中*/ text-align:center; /* 针对IE的Hack */ *display: block; *font-size: 175px;/*约为高度的0.873,200*0.873 约为175*/ *font-family:Arial;/*防止非utf-