未知宽高的盒子水平垂直居中的方法

最新推荐文章于 2022-05-13 10:29:16 发布
最新推荐文章于 2022-05-13 10:29:16 发布
阅读量932 收藏 3
点赞数 1
分类专栏： css 文章标签： 盒子居中
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hbjiankely/article/details/80833002
版权 
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Document</title>
<style>
* {
 margin: 0;
 padding: 0;
}
//第一种方式
.parent {
 position: absolute;
 left: 50%;
 top: 50%;
 background-color: red;
 transform: translate(-50%,-50%);//IE8不支持
}
//第二种 flex IE9以下不支持
.parent {
 width: 100%;
 height: 100%;
 display: flex;
 justify-content: center;
 align-items: center;
}
//第三种 用table-cell属性 IE8不支持
.parent {
 display: table;
 width: 100%;
 height: 100%;

}
.parent .child {
 display: table-cell;
 vertical-align: middle;
 text-align: center;
}
</style>
</head>
<body>
 <div class="parent">
 <div class="child">我也不知道自己的宽度和高度，实现水平和垂直居中</div>
</div>
</body>
</html>

 

_freely
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
未知宽高盒子水平垂直居中方法
weixin_44145479的博客
07-27 1551
1.用css3提供的transform属性 上代码 .wrap{ width: 400px; height: 400px; background-color: red; position: relative; } .child{ width:...
CSS 实现未知内容高度的垂直水平居中(改良版)
12-11
垂直居中在IE浏览器下的实现比较难实现，而更难实现的应该是未知内容高度的垂直水平居中！还好网上也有很多高人发布了一些解决的方法！这里我进行了一些改良，兼容FF，IE6，IE7，Opera…如发现问题有劳回复评论！ ...
实现一个未知宽度的盒子水平居中
斑驳的岁月
05-08 147
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>实现一
让一个不定宽高的盒子水平垂直居中
nbsl_的博客
04-03 924
让一个不定宽高的盒子水平垂直居中 一、使用定位的方式 .father{ position: relative; width: 500px; height: 300px; background-color: skyblue; } .son{ width: 40px; height: 40px; background-color: orange; position: absolute;
使一个不定宽高的盒子实现垂直水平居中(简单)
JS_Beauty的博客
06-29 2962
如何使一个不定宽高的元素实现垂直水平居中 结构 <div class="father"> <div class="son"></div> </div> 1.使用css方法： 父盒子设置：display:tbale-cell; text-align:center; vertical-align:middle; 子元素设置：dislplay: inline-block; vertical-align:middle; .father {
宽高未知的盒子居中
wj1713520的博客
04-01 137
1.使用弹性盒子布局居中；对父容器设置 display: flex; justify-content: center; align-items: center; 2.使用定位居中； 对父容器设置 position: relative; 对子容器设置 position: absolute; top: 50%; left: 50%; transform: translate
纯js代码实现未知宽高的元素在指定元素中垂直水平居中显示
01-19
下文以span元素为例子，介绍一下如何实现span元素在div中实现水平垂直居中效果，代码如下: <!DOCTYPE html> <html> <head> <meta charset= utf-8> <meta name=author content=...
CSS解决未知高度的垂直水平居中自适应问题
09-27
今天有人问起，晚上试着写出来，供参考； 以下代码兼容主流浏览器IE... 从最简单的开始………… 一、如何让一个DIV水平居中？ 这个简单不作过多说明！ [code] <style> body { text-align:center} #info{ margin:0
使用CSS实现盒子水平垂直居中的方法(8种)
01-18
原始代码： center.html： <!DOCTYPE html> <html lang=Zh> <head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, initial-scale=1.0>...
元素水平垂直居中的几种方法
01-20
这种方法可以同时实现水平和垂直居中，但要求父元素有固定尺寸，且子元素没有固定宽高。 第四种方法利用`flexbox`布局实现居中，这是现代CSS布局的标准方式。代码如下： ```css #box1 { width: 300px; height: ...
对于一个未知宽高的盒子，如何让它水平垂直居中于父元素？
weixin_42262156的博客
03-19 671
1. table display: table;使父元素的作用像table元素一样，display: table-cell;使子元素的作用像td一样。给此时的子元素用vertical-align和text-align设置水平垂直居中，子元素其中的未知宽高的元素当然就相对子元素水平垂直居中了。 <!DOCTYPE html> <html> <head> ...
让宽高未知的元素在容器内水平垂直居中的办法
qq_43982131的博客
05-13 211
1.用子绝父相，设置父盒子position:relative 子元素position：absolute，在子元素样式中，直接写top：50%，left：50%，这是发现并没有居中，因为是根据边框来移动的，而不是中心点，此时直接拉回该元素自身宽度的一半，transform：translate（-50%，-50%） ， 这样就可以不知道具体宽高就让元素水平垂直居中了。 2. 设置元素的父级为弹性盒子`display:flex`，设置父级和盒子内部子元素水平垂直都居中`justify-content:cente
没有固定高的盒子，在div中垂直水平居中的方法
weixin_44293738的博客
02-28 173
方法一：使用flex布局 .box{ width:800px; height:800px; display:flex; align-items:center; justify-content:center; } .child{ padding:50px; background:pink; } <div class="box"> <div class="chi...
元素未知宽高垂直水平居中
qiankui的博客
03-01 291
未知宽高 position: absolute; top:50%; left:50%; transform: translate(-50%,-50%);
不定宽高盒子水平垂直居中的写法
AsuraSylar的博客
09-28 170
1. width: 1200px; height: 600px; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); 2. width: 1200px; height: 600px; position: absolute;...
没有固定宽高的盒子的垂直居中
weixin_30414305的博客
05-08 167
HTML <div class="box"> <div class="wrapper">我不知道我的宽度和高是多少，我要实现水平垂直居中。我不知道我的宽度和高是多少，我要实现水平垂直居中。我不知道我的宽度和高是多少，我要实现水平垂直居中。我不知道我的宽度和高是多少，我要实现水平垂直居中。我不知道我的宽度和高是多少，我要实现水平垂直居中。我不知道我的宽度和高是多少...
不给盒子宽高，让盒子垂直居中的方法
沐法沙
09-12 634
1、定位 { position:absolute; top:50%; left:50; transform:translate(-50%,-50%); } 2、flex布局 // 给父盒子添加属性 { display:flex; justify-content:center; align-items:center; } 3、为父盒子设置属性 { display: tabl...
未知宽高的div盒子，水平和竖直方向都居中
Haines
06-19 194
方法一：定位 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>未知宽高元素水平垂直居中</title> </head> <style> .parent3{ position: relative; height:300px; width: 300px; background
盒子垂直水平居中
yshusencsdn的博客
08-03 221
盒子水平垂直居中
盒子水平垂直居中的方法
最新发布
07-27
有几种方法可以实现盒子水平垂直居中的效果，以下是其中一种常用的方法： 1. 使用 Flexbox 布局： ```html <div class="container"> <div class="box">内容</div> </div> ``` ```css .container { display: flex; justify-content: center; align-items: center; height: 100vh; /* 可根据需要设置盒子的高度 */ } .box { /* 可以根据需要设置盒子的样式，如宽度、高度、背景颜色等 */ } ``` 上述代码中，通过将父容器（`.container`）设置为 Flexbox 布局，并使用 `justify-content: center;` 和 `align-items: center;` 属性将子元素（`.box`）水平垂直居中。 2. 使用绝对定位和负边距： ```html <div class="container"> <div class="box">内容</div> </div> ``` ```css .container { position: relative; height: 100vh; /* 可根据需要设置盒子的高度 */ } .box { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); /* 可以根据需要设置盒子的样式，如宽度、高度、背景颜色等 */ } ``` 上述代码中，通过将父容器（`.container`）设置为相对定位，并将子元素（`.box`）设置为绝对定位，并使用 `top: 50%;`、`left: 50%;` 和 `transform: translate(-50%, -50%);` 将盒子水平垂直居中。 这只是其中两种实现方式，还有其他方法，如使用表格布局、使用 CSS Grid 布局等，可以根据具体情况选择适合的方法。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值