css div水平垂直居中几个例子

一、未知宽度水平居中

 代码如下 复制代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>未知宽高div在页面内水平垂直居中</title>
<style>
*{margin:0; padding:0;}
body,html{overflow:hidden; height:100%;}
.box {height: 100%; overflow: hidden; position: relative; width: 100%; display: table;}
.middle {top:50%;text-align:center;display: table-cell; vertical-align: middle; *position:absolute; *left:50%;}
.content{border:#09F solid 1px; margin:0 auto; position:relative; top:-50%;font:12px/2 "Microsoft YaHei"; padding:0 10px; display:table; *left:-50%;}
</style>
</head>

<body>
<div class="box">
        <div class="middle">
        <div class="content">未知宽高div在页面内水平垂直居中</div>
    </div>
</div>
</body>
</html>

 
二、未知宽高div 水平垂直居中

 代码如下 复制代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>未知宽高div在页面内水平垂直居中</title>
<style>
*{margin:0; padding:0;}
body,html{overflow:hidden; height:100%;}
.box {height: 100%; overflow: hidden; position: relative; width: 100%; display: table;}
.middle {top:50%;text-align:center;display: table-cell; vertical-align: middle; *position:absolute; *left:50%;}
.content{border:#09F solid 1px; margin:0 auto; position:relative; top:-50%;font:12px/2 "Microsoft YaHei"; padding:0 10px; display:table; *left:-50%;}
</style>
</head>

<body>
<div class="box">
        <div class="middle">
        <div class="content">未知宽高div在页面内水平垂直居中</div>
    </div>
</div>
</body>
</html>

三、已知宽高div 水平垂直居中

 代码如下 复制代码

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>宽高固定的容器如何在浏览器中水平垂直居中</title>
</head>
<style>

html,body { margin:0; padding:0; height:100%; font:12px/180% "宋体"; text-align:center;}
#main {
 width:200px;
 height:20px;
 background-color:#ddd;
 position:relative;
 top:50%;
 margin:-10px auto 0 auto;   
 /*   margin-top=-(height/2);   */
}
</style>
<body>
<div id="main">
  传说中的水平及垂直居中
</div>
</body>
</html>
时间： 2024-09-20 13:28:26

css div水平垂直居中几个例子的相关文章

CSS制作水平垂直居中对齐 多种方式各有千秋

在制作Web页面时都有碰到CSS制作水平垂直居中,我想大家都有研究过或者写过,平时工作收集了几种不同的方式制作垂直居中方法,但每种方法各有千秋在此与大家分享或许对初学者有所帮助   作为前端攻城师,在制作Web页面时都有碰到CSS制作水平垂直居中,我想大家都有研究过或者写过,特别的其中的垂直居中,更是让人烦恼.这段时间,我收 集了几种不同的方式制作垂直居中方法,但每种方法各有千秋呀,要正确的选择也是一件不容易的事情.我会将这几种方法一一介绍给大家,以供大家参考.或许对 于我这样的初学者有一定的帮

jquery计算出left和top,让一个div水平垂直居中的简单实例_jquery

实例如下: if($("#cont1").css("position")!="fixed"){ $("#cont1").css("position","absolute"); var dw = $(window).width(); var ow = $("#cont1").outerWidth(); var dh = $(window).height(); var o

css实现在div水平垂直居中与图片水平居中的效果

div居中的完美解决方案! (水平垂直居中) 1,关于居中使用css为:  代码如下 复制代码 position:fixed;left:50%;top:50%;margin-left:width/2;margin-top:height/2; 对于ie6,只能把position:改成absolute; 图片在div中居中 利用图片的margin属性将图片水平居中,利用div的padding属性将图片垂直居中. 方法一: css代码如下:  代码如下 复制代码 div {width:300px; h

css中水平垂直居中对齐布局实例总结

 水平居中,如果知道元素的宽度,则可以使用 代码如下 .cell{width:300px; margin:0 auto; text-align:center;}   如果是内联元素居中,那么直接用text-align:center则行 如果未知元素宽度,并且非内联元素,那么下面给出的几种方案也适合你. 用CSS来实现元素的垂直居中效果是件苦差事,虽然说实现方法有多种,但有很多方式在某些浏览器下可能无法正常的工作.接下来我们就一起来看看这些不同方法实现垂直居中的各自优点和其不足之处. 方法一: 这

css中水平垂直居中对齐布局一些实例总结

水平居中,如果知道元素的宽度,则可以使用  代码如下 复制代码 .cell{width:300px; margin:0 auto; text-align:center;} 如果是内联元素居中,那么直接用text-align:center则行 如果未知元素宽度,并且非内联元素,那么下面给出的几种方案也适合你. 用CSS来实现元素的垂直居中效果是件苦差事,虽然说实现方法有多种,但有很多方式在某些浏览器下可能无法正常的工作.接下来我们就一起来看看这些不同方法实现垂直居中的各自优点和其不足之处. 方法一

CSS如何水平垂直居中？CSS水平垂直居中的方法汇总

直接进入主题! 一.脱离文档流元素的居中 方法一:margin:auto法 CSS代码: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 div{       width:400px;       height:400px;       position:relative;       border:1pxsolid#465468;  }  img{       position:absolute;       margin:auto;       top:0;       l

三款css div 图片垂直居中代码

本文章收集了三款css教程 div 图片垂直居中代码哦,他可以对div进行垂直居中同时也可以对图片垂直居中哦,好了下面我们来看看这款垂直居中实例代码吧. cssbox{  /* 非ie内核浏览器识别垂直居中 */  display:table-cell;  vertical-align:middle;  /* ie内核浏览器识别垂直居中 */  *display:block;  /* 约为高度的0.873,200*0.873 约为175 */  *font-size:175px;  text-a

css 图片水平垂直居中实例小结

图片水平垂直居中是老梗,大部分人都做过,或者被面试时问过.但是下面这种0.873方法我是刚知道~~ mark一下.font-size:105 = 120*0.873 提供方法人: shenshenyan span{display:table-cell;text-align:center; vertical-align:middle;*display:block;*font-family:aiarl;width:120px;height:120px;*font-size:105px;} span

jquery实现div水平垂直居中例子

jquery统计出来  代码如下 复制代码 if($("#cont1").css("position")!="fixed"){ $("#cont1").css("position","absolute"); var dw = $(window).width(); var ow = $("#cont1").outerWidth(); var dh = $(window)