div垂直水平居中实例代码

div垂直水平居中实例代码:
关于让div垂直水平居中的效果太多了,这里就不介绍了,废话不多说,直接给出代码。
代码实例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>垂直水平居中代码</title>
<style type="text/css">
body {
  background-color:#e1ddd9;
  font-size:12px;
  padding:0px;
  margin:0px;
}
#inhalt {
  position:absolute;
  height:200px;
  width:400px;
  margin:-100px 0px 0px -200px;
  top:50%;
  left:50%;
  text-align:left;
  padding:0px;
  background-color:#f5f5f5;
  border:1px dotted #000000;
  overflow:auto;
}
</style>
</head>
<body>
<div id="inhalt"></div>
</body>
</html>

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=9808

更多内容可以参阅:http://www.softwhy.com/divcss/

时间: 2024-11-07 14:55:18

div垂直水平居中实例代码的相关文章

jQuery实现的div垂直水平居中实例代码

jQuery实现的div垂直水平居中实例代码:在窗口中有一个div元素,下面就介绍一下如何使用jQuery将其设置为水平垂直居中对齐,希望能够给需要的朋友带来一定的帮助.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/&quo

CSS让div水平居中实例代码

CSS让div水平居中实例代码:在布局中,往往希望一个div是水平居中的,对于如何让div水平居中,稍有经验的人员都不成问题,只需要一句代码就可以搞定,但是初学者往往可能不清楚,废话不多说了,直接给出代码. .box { width:200px; height:200px; margin:0px auto; } 在这里必须要注意的是,div宽度必须要认为的设置,否则无法设置居中. 原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=

css实现浏览器垂直水平居中效果代码

css实现浏览器垂直水平居中效果代码:可能是由于居中相对美观一些吧,所以一些弹窗或者功能模块出现的位置都是位于网页中间,下面就介绍一端利用css实现的将div实现垂直水平居中的效果,代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/

js实现的div拖动效果实例代码

js实现的div拖动效果实例代码:div的拖动效果在很多效果中都有应用,当然还有很多附加的功能,本章节只是给拖动效果,并介绍一下它的实现过程.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <t

css div垂直水平居中实现

比如设置html中下面的div为垂直水平居中,则 <div id="box"></div> css样式 #box{ width: 300px; height: 200px; margin-left: -150px;//宽度的一半,很重要,不然不居中,会偏右 margin-top: -100px;//高度的一半 position: absolute;//绝对定位方式 top: 50%; left: 50%; background-color: aqua;//背景颜

任意长宽度子div在任意长宽度父div垂直水平居中

<DocType html><html>    <head>        <title>任意长宽度高度垂直水平居中div</title>        <style>            .parentDiv{                width:500px;<!-- 长宽可以改变-->                height:500px;                margin:0 auto;     

DIV垂直水平居中

1.div{ display:table-cell; text-align:center; vertical-align:middle;}.div1{ display:inline-block;}/*子div不能设置浮动*/ 2..div{ display:flex; align-items:center; /*垂直居中*/ justify-content: center; /*水平居中*/}/*兼容性不好,不推荐*/ 3..div1{ transform:translate(-50%,-50%

DIV垂直/水平居中2(DIV宽度和高度是动态的)

<!doctype html><html><head><meta charset="utf-8"><title>块元素DIV-垂直/水平居中(动态)</title><script type="text/javascript" src="js/jquery.js"></script><script type="text/javascrip

前端开发入门到实战:css实现div垂直水平居中的2种常用方法

方法一: 利用vertical-align:middle进行垂直方向上的居中对齐,此方法需要满足的条件: 设置父元素的行高line-height等于父元素height的高度 子元素必须是行内块级元素display:inline-block; 子元素设置vertical-align:middle 此方法在开发中不能右浮动(不能靠右边) 下方是完整代码,可以新建一个HTML文件进行测试(绿色的盒子): <html> <head> <title>导航条</title&g