DIV绝对居中(CSS)

最新推荐文章于 2021-03-29 22:36:38 发布
最新推荐文章于 2021-03-29 22:36:38 发布
阅读量622 收藏
点赞数
原文链接：http://www.cnblogs.com/leotian/archive/2008/12/13/1354245.html
版权

 

<style type="text/css">
<!-- 
#hc{
height:200px; 
width:400px; 
margin:-100px 0px 0px -200px; 
top: 50%; 
left: 50%; 
text-align: left; 
padding: 0px; 
position:absolute; 
overflow: auto; 
}
-->
</style>

<div id="hc"></div>

 

转载于:https://www.cnblogs.com/leotian/archive/2008/12/13/1354245.html

weixin_30455661
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
css让一个div绝对居中
listStyleScript的博客
03-14 620
css面试题@让一个div绝对居中 <!-- html页面 --> <body> <div> </div> </body> 方法1 /* css */ html,body{ height: 100%; } body{ margin: ...
盘点8种CSS实现垂直居中水平居中的绝对定位居中技术
923723914
09-11 4351
Ⅰ.绝对定位居中(Absolute Centering)技术 我们经常用margin:0 auto来实现水平居中，而一直认为margin:auto不能实现垂直居中……实际上，实现垂直居中仅需要声明元素高度和下面的CSS: .Absolute-Center { margin: auto; position: absolute; top: 0; left: 0; botto...
css绝对居中
weixin_34159110的博客
01-15 1121
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .box{ width:400px; h...
绝对居中
xuelang532777032的博客
08-10 352
绝对居中 于窗体正中间 css
Html Css的div设置为绝对居中
PrimaryColor
07-15 458
效果图： 第一种方式： Html代码： <div class="box"> <div class="a"></div> </div> Css代码： .box { position: absolute; top: 50%; left: 50%; } .a { width: 200px; height: 200px; position: relative; top: -100px; left: -100px; b
使用css实现div垂直居中的示例
09-25
本示例将详细解释如何使用CSS来实现`div`元素的垂直居中。 首先，我们要理解CSS布局的基本概念。在网页中，元素的位置可以通过设置`position`属性来控制，其主要值有`static`（默认值）、`relative`、`absolute`和`...
div居中显示的css样式代码
09-25
总结起来，实现`div`居中显示的CSS方法多种多样，包括使用`display: flex`、`grid`布局、或者如上所示的绝对定位等。这个例子中使用的是绝对定位结合负外边距的方法，适用于不支持新CSS布局特性的浏览器。在实际开发...
CSS教程之div垂直居中的多种方法
09-24
本文主要讲解了如何使用CSS实现div元素以及其中多行文本的垂直居中。首先，我们要明确CSS中的`vertical-align`属性并不能直接用于所有元素，它仅适用于表格单元格（如`<td>`）和其他具有`valign`特性的元素。对于`...
DIV+CSS上下左右绝对居中
06-12
在网页设计中，"DIV+CSS上下左右绝对居中"是一个常见的布局需求，尤其是在构建响应式网站时。这个主题涉及到CSS（层叠样式表）的布局技巧，它可以帮助元素在不同屏幕尺寸下都能保持在容器的中心位置。下面将详细探讨...
关于CSS控制DIV水平居中问题
12-12
关于CSS 控制DIV水平居中问题，我看到很多新人搞不明月。记得第一次看CSS是一个老外写的书，那个里面谈到居中使用。 margin-left:auto;margin-right:auto; 其实等同于： margin:0 auto; 　于是可以使用这种方式，...
让div绝对居中显示的css&js
zhaoxiao的专栏
08-26 3139
使DIV居中css代码，其中899px，507px分别改成自己的div的宽度和高度 .divname { width: 899px; height: 507px; position: absolute; left: expression(( body.clientWidth-899)/ 2 ); top: expression(( body.clientH
CSS div居中实现
今天
12-02 717
主要记住两种实现方法： 用绝对定位 position: absolute; top: 50%; left: 50%; -webkit-transform: translate3d(-50%,-50%,0); transform: translate3d(-50%,-50%,0); width: 80%; flex布局 在父元素指定 display
CSS绝对居中
WeiAiGeWangFeiYuQing的博客
12-13 447
目录绝对定位居中定位居中的思想具体实现第一种写法第二种写法第三种方法第四种方案第五种方案 绝对定位居中 定位居中的思想 元素左移下移父元素的一半，然后再右移上移元素自身的一半。 具体实现 页面布局，居中元素为 .box，父元素为 .wraper。 &amp;lt;div class=&quot;wraper&quot;&amp;gt; &amp;lt;div class=&quot;box&quot;&amp;gt;&amp
设置div绝对定位+居中
weixin_30835649的博客
04-27 298
　　1）：div的一般居中（注意：一定要设置div的width）： <div id="i_div" style="border: 1px solid red;margin: 0 auto; width:500px;">json9527</div> 　　2）：div的绝对定位居中（注意：一定要设置父标签的position为relative） <div ...
DIV的常用的几种绝对居中方法
Liu331013的博客
03-29 997
DIV的常用的几种绝对居中方法 方法一：利用margin和绝对定位一 优点: 1.支持跨浏览器，包括IE8-IE10 缺点: 1.必须声明宽高度。 <div class="container"> <div class="box"></div> </div> .container { position: relative; width: 200px; height: 200px; background-color: pink; } .cont
如何在div中将绝对定位的元素居中？
asdfgh0077的博客
12-13 1074
我需要在窗口中心放置一个div （带有position:absolute; ）元素。 但是我遇到了问题，因为宽度未知 。 我试过了 但是，由于宽度是响应性的，因此需要对其进行调整。 .
div 绝对屏幕居中
ruilin521314
01-07 866
div 绝对屏幕居中 必须加 &lt;!DOCTYPE 啊! .div { width:300px; height:400px; margin:-200px 0 0 -150px; // -200 == height/2 // -150 == width/2 position:absolute; top:50%; left:50%;} &lt;div cla...
div绝对居中的六种方法
weixin_40151813的博客
01-20 1389
在平时，我们经常会碰到让一个div框针对某个模块上下左右都居中（水平垂直居中），其实针对这种情况，我们有多种方法实现。 方法一:绝对定位方法：不确定当前div的宽度和高度，采用 transform: translate(-50%,-50%); 当前div的父级添加相对定位（position: relative;） div{ background:red; position: abs...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值