css垂直水平居中代码

css教程垂直水平居中代码
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.jzread.com/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<title>css垂直水平居中代码</title>
<style type="text/css">

.cncenter{
  height:30px;
  width:600px;
  margin:0px auto;
  background:#0c6;
 }
</style>
</head>
<body>
<div class="cncenter">
</div>
</body>
</html>

div居中的完美解决方案! (水平垂直居中)
1,关于居中使用css为:position:fixed;left:50%;top:50%;margin-left:width/2;margin-top:height/2;
对于ie6,只能把position:改成absolute;

时间: 2024-10-04 13:13:21

css垂直水平居中代码的相关文章

CSS垂直/水平居中总结

经常会遇到各种元素要求居中的,今天把他们都叫出来统一解决: 1.水平居中 1.1行内元素 text-align:center; 1.2固定宽度块级元素 margin-left:auto;margin-right:auto; 注意:一定要确保设定了宽度值,而且声明了DOCTYPE. 1.3不确定宽度块级元素 <pre name="code" class="html"><div class="wrap"> <ul>

CSS图片响应式 垂直水平居中_javascript技巧

我看最近微博流行CSS居中技术,我看了几编资料写的都不多好,于是抽时间把相关资料整合了,具体内容如下. 点击此处下载源码 效果展示: 要求: 1.尽可能兼容更多浏览器,这里兼容到ie7,ie6不支持max-*就不考虑了. 2.浏览器尺寸变化时,图片总是等比例拉伸或缩放. 3.包裹图片的div也是响应式的,并且每个div的尺寸是一样的. 4.图片始终保持水平垂直居中. 5.图片的行列数不变,这里一直都是3*3. 下面来搞定一个个要求. 满足要求1意味着这里要尽量不使用高级浏览器才有的属性,比如高级

css实现垂直水平居中实例代码

首先我们我们想到居中就是相对于当前窗口,上边距和左边距各一半即可,于是有了下边的css样式:  代码如下 复制代码 .center {     left:50%;     top:50%;     position:fixed; } 我们很快发现,问题还没有真正解决, 要实现居中,我们要将对象向左.向上分别移动图片宽度.高度的一半,所以最终的样式如下:  代码如下 复制代码 .center {     left:50%;     margin-top:-50px;     margin-left

纯css完美地解决图片在div内垂直水平居中,兼容全部浏览器

本站提供的方法,纯css完美地解决图片在div内垂直水平居中,兼容IE7.0.IE6.0.IE5.5.IE5.0.FF.Opera.Safari...... 强烈推荐收藏! [Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

纯js代码实现未知宽高的元素在指定元素中垂直水平居中显示_javascript技巧

下文以span元素为例子,介绍一下如何实现span元素在div中实现水平垂直居中效果,代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title></title> <sty

纯css完美实现图片在div内垂直水平居中

以下是要实现插入图片的绝对居中,如果你仅仅是想让图片居中,最简单的方法是设为背景图片,如: div {    width:500px;border:1px solid #f00;    height:500px;    background:url("/images/logos.gif") center no-repeat    } 言归正转,请看以下代码实现图片在div内垂直水平居中: 以下是HTML网页特效代码,点击运行按钮可查看效果: [Ctrl+A 全部选择 提示:你可先修改部

css中固定高度容器内的图片垂直水平居中的实例

在某一个网站(freeappstools)上看到的这个"新奇"解法,说新奇,主要是国内各种总结的方法都没提到过,打引号,只是因为其中的原理很多人都知道:即依靠行高(line-height)的方法.  line-height对于img元素并不起作用:  代码如下 复制代码 <div style="height:250px;background:#ccc;line-height:250px;width:400px;text-align:center;">  

CSS垂直树形下拉菜单

css|菜单|下拉 第一步:建立菜单 首先建立菜单架构非常重要,最好的方法是使用ul来建立各菜单内容的从主关系.很复杂么?其实只要一路写下去就OK了: 以下是引用片段: <ul>      <li><a href="#">Home</a></li>      <li><a href="#">About</a>        <ul>          <

两栏DIV+CSS标准布局代码

一款两栏式DIV+CSS标准布局代码,详细如下: 代码如下:<html> <head> <title>Nice and Free CSS Template 1</title> <style type="text/css" media="screen"><!-- /*  body und schrift deffinitionen */ html, body{ padding:0px; margin:0