div居中代码

最新推荐文章于 2023-08-13 00:34:20 发布
最新推荐文章于 2023-08-13 00:34:20 发布
阅读量580 收藏
点赞数
分类专栏： JAVASCRIPT
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhuixunhebe1/article/details/20767357
版权

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">




<html xmlns="http://www.w3.org/1999/xhtml">




<head>




<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />




<title>CSS布局技巧：未知高度div 垂直居中的问题</title>




<style type="text/css">




html,




body




{




height: 100%;




padding:0;




margin:0;




}




body




{




min-height: 200px;




text-align: center;




min-width: 402px




}




.FirstDIV




{




margin-top: -100px;




float: left;




width: 100%;




height: 50%;




}




.SecondDIV




{




clear: both;




border: silver 1px solid;




background: #666;




margin-left: auto;




overflow: auto;




width: 400px;




margin-right: auto;




height: 200px;




text-align: left




}




</style>




</head>




<body>




<div class="FirstDIV"></div>




<div class="SecondDIV">




<p>看看，这不就居中了。呵呵。而且没有问题哦。www.Webjx.com </p>




<p>body{ background-color:#FFF5F0}<br>




div{ position:absolute; top:50%; left:50%; margin:-100px 0 0 -200px;




width:400px; height:200px; border:1px #CCCC00 solid; font-family:Arial,




Helvetica, sans-serif; color:#666666 } </p>




</div>




</body>




</html>




<TABLE style="height:100%;width:100%;" border="1">

<TR>

<TD style="vertical-align:middle;">

aaaaaaaaaa

</TD>

</TR>

</TABLE>

我的更多文章：
侯卓
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS中让DIV居中的代码
09-25
今天用CSS碰到个很棘手的问题,DIV本身没有定义自己居中的属性, 网上很多的方法都是介绍用上级的text-align: center然后嵌套一层DIV来解决问题
CSS，height:auto和height:100%有什么区别？
weixin_30256505的博客
03-19 193
auto是随内容的高度而撑开的。100%是根据父级元素的高度来决定的。例如：<div style="height:100px;width:200px;"> <div style="height:auto;width:100px;float:left;">这个容器的高度是随里面的内容的高度而定</div> <div style="he...
Vue 中在全屏Dialog对话框 中 iframe 的高度自适应设置
meiwan123的博客
06-19 4569
首先是html 这个没啥说的 <el-button @click="edit(scope.row)" type="text" size="small">编辑</el-button> <div style="height: 100%"> <el-dialog title="Activiti工作流在线流程设计编辑" :fullscreen="true" st...
div居中方法（共9种）
qq_36608036的博客
02-25 7万+
div居中方法（共8种） 水平居中 行级元素：为该行级元素的父元素设置text-align:center配合line-height样式 <div style="width: 500px;height: 100px;line-height: 100px;border: 1px solid green;text-align:center;"> <span>行级元素</span> </div> 块级元素：为其自身设置margin:auto样式 <di
div居中
qq_39114437的博客
06-09 2万+
HTML的div居中 一、margin:0px auto; 给需要居中的div设置一个宽度，然后设置元素的上下外边距为 相等 左右外边距为 auto，比如，margin:0px auto。 则可以实现 div 居中显示。 对于浮动元素，设置其左右外边距为关键字 auto 是无效的。此时，如果需要设置其居中显示， 可以： 1、 精确计算其左外边距并进行设置，实现居中显示； 2、 使用一个居中显示的 div 元素包含此浮动元素。 代码： <!DOCTYPE html> <html lang="
（史上最全）div居中的几种方法
weixin_33796205的博客
04-15 1899
使div水平垂直居中1. flex 布局实现 （元素已知宽度）效果图：内部 div 要有宽度CSS 代码: <style> .box{ width: 300px; height: 300px; background-color: #ccc; ...
div居中显示的css样式代码
09-25
div居中的使用还是比较广泛的，在本文有个不错的示例，可以帮助大家更好的理解div居中显示，感兴趣的朋友不要错过
浮动的div自适应居中显示的js代码
12-09
当div是浮动的时候浏览器窗口发生变化的时候不能居中显示（因为浮动的时候一般设定的有left或者right值） 可以先用jquery获取外围的div随浏览器变化而变化的宽度（加上监听事件） 之后再获取div的宽度 例如： 代码...
DIV始终居中的js代码
01-19
代码如下: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml”> <head&...
div 中元素居中的N种常用方法
最新发布
u011799045的专栏
08-13 1万+
div 中元素居中的N种常用方法
DIV居中及DIV垂直居中.html
05-16
该html代码是实现DIV居中及DIV垂直居中的实例,包括: div居中, div内文本居中及垂直居中, div嵌套div并居中, div嵌套div并垂直居中.
html div 居中心,CSS实现DIV居中的三种方法
weixin_39613951的博客
06-02 484
下面给大家分享div居中的实现代码，具体代码如下所示：demo.div1{ width: 100px; height: 100px; border: 1px solid #000000;}.div2{ width:40px ; height: 40px; background-color: green;}如上的两个div，实现div2在div1里面是居中显示一、方法一利用margin，div1的...
设置div居中的方法
xufang461010923的专栏
07-12 1万+
对div居中方法的总结，包括 position 定位、flex布局、margin 等知识点
html中div居中的代码怎么写,CSS中让DIV居中的代码
weixin_33558958的博客
06-01 3728
CSS 如何使DIV层水平居中今天用CSS碰到个很棘手的问题,DIV本身没有定义自己居中的属性, 网上很多的方法都是介绍用上级的text-align: center然后嵌套一层DIV来解决问题.可是事实上这样的方法科学吗?经过网络搜索和亲自实验得出以下结论:正确的也是对页面构造没有影响的设置如下:对需要水平居中的DIV层添加以下属性:复制代码代码如下:margin-left: auto;margi...
div居中和div内容居中
shenzixincaiji的博客
08-27 7万+
一、div自身居中： 使用margin:0 auto 上下为0，左右自适应的css样式。 要让div水平居中，那么除了设置css margin:0 auto外，还不能再设置float，不然将会导致div靠左（设置float:left）和div靠右（设置float:right）。 1、div布局居中实例代码 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;he...
div居中方法（共8种）
热门推荐
qq_41425194的博客
04-25 10万+
水平居中 1.行级元素：为该行级元素的父元素设置text-align:center配合line-height样式 <div style="width: 500px;height: 100px;line-height: 100px;border: 1px solid green;text-align:center;"> <span>行级元素</span> </div> 2.块级元素：为其自身设置margin:auto样式 <div st
php div 居中代码,三种css方法实现DIV居中
weixin_39967120的博客
03-10 213
本文主要和大家分享css实现p居中的方法，css代码简单易懂，非常不错，具有参考借鉴价值，需要的朋友参考下，希望能帮助到大家。下面给大家分享p居中的实现代码，具体代码如下所示：demo.p1{ width: 100px; height: 100px; border: 1px solid #000000;}.p2{ width:40px ; height: 40px; background-col...
【小5聊】css样式设置之单行文字溢出、多行文字溢出
小5聊的博客
03-13 320
1、单行文字溢出 <div style="height:auto;line-height:23px;padding:0 10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"> <span>标题标题标题标题标题标题标题标题标题标题标题标题</span> </div&gt...
div 居中对齐代码
05-28
可以使用以下 CSS 代码将 div 元素居中对齐： ```css div { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } ``` 这会将 div 元素相对于其父元素垂直和水平居中对齐。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值