html 中div垂直居中的三种方式

最新推荐文章于 2024-06-24 11:40:44 发布
最新推荐文章于 2024-06-24 11:40:44 发布
阅读量10w+ 收藏 14
点赞数 1
文章标签： div html border 测试
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lifuxiangcaohui/article/details/6165034
版权

1、第一种：

<style type="text/css">   
<!--   
.con_div{   
width:400px;   
height:300px;   
border:1px solid #777;   
text-align:center;   
display:table-cell;   
vertical-align:middle;   
background:red;   
color:#fff;   
line-height:300px;   
}   
-->   
</style>   
  
<div class="con_div">   
测试内容ddddddddddd   
</div>  

2、第二种：

<style type="text/css">   
<!--   
.con_div{   
width:400px;   
height:300px;   
border:1px solid #777;   
text-align:center;   
display:table-cell;   
vertical-align:middle;   
background:red;   
color:#fff   
}   
/*FOR IE*/  
.fixie{   
width:0;   
height:100%;   
display:inline-block;   
vertical-align:middle;   
}   
-->   
</style>   
  
<div class="con_div">   
<span class="fixie"></span>   
测试内容   
</div>

3、第三种：

<style>  
#warp {   
  position: absolute;   
  width:500px;   
  height:200px;   
  left:50%;   
  top:50%;   
  margin-left:-250px;   
  margin-top:-100px;   
  border: solid 3px red;   
}   
</style>  
<body>  
  <div id=warp>Test</div>  
</body>  

 

关注公众号，第一时间获取JAVA、大数据知识或面试题

 

 

 

Java海洋
关注
  • 1
    点赞
  • 踩
  • 14
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 3
    评论
专栏目录
div框水平垂直居中跟内容垂直居中.html
03-31
div框水平垂直居中跟内容垂直居中
div水平垂直居中的四种方式
热门推荐
qq_57443373的博客
09-08 3万+
让div水平居中的方式，我所知道的就是以下这四种。 文章目录一、margin二、绝对定位三、子元素绝对定位父元素相对定位四、flex布局总结 一、margin 第一种方式我们可以利用外边距属性来使div水平垂直居中 先来看一段有问题的代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=d..
HTML中div内容垂直居中显示
yhj198927的博客
01-18 993
HTML中要将div元素的内容垂直居中显示，你可以使用 CSS 的 flexbox 或者 grid 布局来实现。下面分别介绍两种方法。
HTML(23)——垂直对齐方式
最新发布
m0_74386799的博客
06-24 423
可以看到图片的下方还有空白。接下来在img内添加vertical-align: middle;发现图片下方空白消失，并且文字也移动到了中间。默认情况下浏览器对行内块，行内标签都按。导致图片看起来会偏上，文字偏下。
CSS总结div中的内容垂直居中的五种方法
qq_41425267的博客
11-03 2万+
一、行高（line-height）法 如果要垂直居中的只有一行或几个文字，那它的制作最为简单，只要让文字的行高和容器的高度相同即可，比如： p { height:30px; line-height:30px; width:100px; overflow:hidden; } 这段代码可以达到让文字在段落中垂直居中的效果。 二、内边距（padding）法 另一种方法和行高法很相似，它同样适合一行或几行文字垂直居中，原理就是利用padding将内容垂直居中，比如： p { padding:20px 0; }
如何实现一个div垂直居中（至少3种方法）
yf18040578780的博客
09-11 4252
如何实现一个div垂直居中（至少3种方法）
div盒子垂直居中的3种方法
u010234868的专栏
03-29 1848
初始HTML代码如下： <div class="father"> <div class="son"></div> </div> 初始CSS代码如下： .father { width: 300px; height: 300px; background-color: pink; margin: 20px auto; } .son { width: 100px; height: 100px; backgro
div中的内容垂直居中的五种方法
cetinlo的博客
05-28 2498
一、行高（line-height）法 如果要垂直居中的只有一行或几个文字，那它的制作最为简单，只要让文字的行高和容器的高度相同即可，比如： p { height:30px; line-height:30px; width:100px; overflow:hidden; } 这段代码可以达到让文字在段落中垂直居中的效果。 二、内边距（padding）法 另一种方法和
div水平垂直居中的七种方法
weixin_44330646的博客
03-02 4328
如何将div垂直水平居中？7个小妙招
div图片垂直居中 如何使div中图片垂直居中
12-13
在网页设计中，让图片或其他内容在`div`容器中垂直居中是一项常见的需求，尤其在跨浏览器兼容性方面，需要找到优雅且高效的方法。淘宝UED招聘中的一道题目提出了一个挑战：用纯CSS实现未知尺寸（但小于200px）的图片...
DIV居中及DIV垂直居中.html
05-16
该html代码是实现DIV居中及DIV垂直居中的实例,包括: div居中, div内文本居中及垂直居中, div嵌套div并居中, div嵌套div并垂直居中.
CSS教程之div垂直居中的多种方法
09-24
在CSS布局中，垂直居中是一项常见的需求，尤其是在网页设计中。本文主要讲解了如何使用CSS实现div元素以及其中多行文本的垂直居中。首先，我们要明确CSS中的`vertical-align`属性并不能直接用于所有元素，它仅适用于...
div 垂直居中的多种方法详细介绍
12-13
在说到这个问题的时候，也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗？即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊！所以在这里我还要啰嗦两句，CSS中的确是有vertical-align属性，...
让元素在div中垂直居中的三种方式
hfhwfw161226的博客
07-19 1万+
对于文字的垂直居中相当简单，只需要设置外层div的height与line-height值相等即可，但是此样式却不适用于div，img，p等元素的居中，下面是解决办法： 一、已知父级div宽高 使父级div显示为表格单元格，通过设置vertical-align:middle;就可以使其中的块级元素垂直居中 // 父级样式 div { height: ?px || ?% || ?vh...
【盒子水平垂直居中的三种（四种）方式】
weixin_52452081的博客
04-17 1539
父盒子使用相对定位,子盒子使用绝对定位,利用top:50% left:50% 让子盒子相距父盒子上边界,左边界宽高的50% 利用 margin-top margin-left返回子盒子自身宽高的50%margin: auto;和 margin-top:;/* 相当于父盒子高度的50% *//*相对于父盒子宽度的50%*//*向上走回自身高度的一半*//*向左走回自身宽度的一半*//* 距离上侧150px *//* 距离左侧300px *//* x轴居中 *//* y轴居中 */
让div在屏幕中居中（水平居中+垂直居中）的几种方法
IT修真院：初学者转行到互联网的聚集地
10-30 5842
让div在屏幕中居中（水平居中+垂直居中）的几种方法 水平居中方法: 1.inline，inline-block元素的水平居中，在父级块级元素中设置text-align:center; 2.确定宽度的块级元素水平居中方法 margin：0 auto； 绝对定位和margin-left:-(width/2)实现水平居中： 绝对定位+margin:0 auto + ...
div水平垂直居中的方式有哪些？
似水流年QC的博客
05-27 459
工作中经常涉及到盒子水平垂直居中，分别有哪些方式，现在盘点一下？
DIV水平垂直居中的几种方式
qq_43086625的博客
08-21 128
Div水平垂直居中的方式。
div垂直居中的三种方法
disuiniang7601的博客
09-05 66
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .father{ width: 200px; height: 2...
html怎么让div垂直居中
12-06
以下是两种HTML让div垂直居中的方法： 1.使用margin属性实现垂直居中： ```html <style> .container { height: 200px; border: 1px solid red; display: flex; justify-content: center; align-items: center; } .box { width: 100px; height: 100px; border: 1px solid blue; } </style> <div class="container"> <div class="box"></div> </div> ``` 2.使用position和transform属性实现垂直居中： ```html <style> .father { width: 200px; height: 200px; border: 1px solid red; position: relative; } .child { width: 100px; height: 100px; border: 1px solid blue; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } </style> <div class="father"> <div class="child"></div> </div> ```
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Java海洋

你的鼓励，是我写下去的动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值