父子div元素水平垂直居中的七种方法

最新推荐文章于 2023-02-13 14:29:38 发布
最新推荐文章于 2023-02-13 14:29:38 发布
阅读量9.8k 收藏 42
点赞数 13
文章标签： html css css3 html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_51403152/article/details/114964151
版权

效果样式图如下:

在这里插入图片描述

方法一:利用定位和transform的方法来进行居中

说明：首先利用定位中的子元素绝对定位和父元素相对定位的方法来,top:50% 和left:50%会使子元素在父元素中向下移动250px,向右移动250px,子元素因自身有高度和宽度,这会导致子元素不能完全居中的情况,transform中的translate属性可以使子元素以自身为中心向上移动和向左移动分别自身的高度,以达到垂直水平居中的效果

<style>
    .box1{
        width: 500px;
        height: 500px;
        background-color: antiquewhite;
        position: relative;
    }
    .box2{
        width: 200px;
        height: 200px;
        background-color: aquamarine;
        position: absolute;
        top: 50%;  
        left: 50%;
        transform: translate(-50%,-50%);
    }
</style>
<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
</body>
</html>

方法二:计算水平垂直居中的距离来定位元素

说明:方法二与方法一不同之处在于需计算子元素和父元素的距离,通过高度和宽度可知子元素需要向下和向右移动150px,利用30%(150px/500px)来进行定位,当然可以利用top和left:150px也可以水平垂直居中

<style>
    .box1{
        width: 500px;
        height: 500px;
        background-color: antiquewhite;
        position: relative;
}
    .box2{
        width: 200px;
        height: 200px;
        background-color: aquamarine;
        position: absolute;
        top: 30%;  
        left: 30%;
        
    }
</style>
<body>
    <div class="box1">
        <div class="box2"></div>
    </div>

方法三:利用外边距margin设置数值和top方法

说明: 与方法一不同之处在于利用外边距来移动子元素的位置,margin-top和margin-left的值分别为子元素自身高度和宽度的一半的负值

<style>
    .box1{
        width: 500px;
        height: 500px;
        background-color: antiquewhite;
        position: relative;
}
    .box2{
        width: 200px;
        height: 200px;
        background-color: aquamarine;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -100px;
        margin-left: -100px;
        
    }
</style>
<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
</body>
</html>

方法四:利用top和margin为auto的方法

说明:当分别将top,bottom,left,right设置为0时,子元素因自身的宽度和高度不足,会在父元素上的初始位置显示,但设置margin为auto,会分别将子元素在父元素中的边距设置为水平垂直居中的距离

<style>
    .box1{
        width: 500px;
        height: 500px;
        background-color: antiquewhite;
        position: relative;
}
    .box2{
        width: 200px;
        height: 200px;
        background-color: aquamarine;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        
        
    }
</style>
<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
</body>
</html>

方法五:利用flex布局的方法(建议使用)

说明:当将box1设置为弹性盒子时,box2就会脱离文档流.利用justify-content和align-items设置为center就可以水平垂直居中.flex布局无需计算居中时的距离

<style>
    .box1{
        width: 500px;
        height: 500px;
        background-color: antiquewhite;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .box2{
        width: 200px;
        height: 200px;
        background-color: aquamarine;
    }
</style>
<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
</body>
</html>

方法六:隔离父子元素来设置边距margin

说明:在单独给box2设置边距的情况下,会出现边距重叠的问题.可以利用box1前面添加一个空table来分离box1和box2,这样就可以单独给子元素box2设置外边距来达到垂直水平居中的效果.

<style>
    .box1{
        width: 500px;
        height: 500px;
        background-color: antiquewhite;
    }
    .box2{
        width: 200px;
        height: 200px;
        background-color: aquamarine;
        margin-top: 150px;
        margin-left: 150px;
    }
    .box1::before{
        content: "";
        display: table;
    }
</style>
<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
</body>
</html>

方法七:将父元素转化为table-cell类型

说明:将父元素box1转化为table-cell类型,并设置vertical-align为居中状态可以达到水平居中的效果.如果子元素为div等块级元素需转化为inline-block类型,设置text-align为居中状态可以达到垂直居中的效果

<style>
    .box1{
        width: 500px;
        height: 500px;
        background-color: antiquewhite;
        display: table-cell;
        vertical-align: middle;
        text-align: center;
    }
    .box2{
        width: 200px;
        height: 200px;
        background-color: aquamarine;
        display: inline-block;
    }
 
</style>
<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
</body>
</html>
Double-C
关注
  • 13
    点赞
  • 踩
  • 42
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 5
    评论
【CSS】使元素在父元素中居中显示的几种方法
qq_65225350的博客
03-28 2157
这种方法需要把父元素和子元素的宽度固定，然后利用二者宽高之差添加边距移动元素的位置现在创建了一个父元素box1中包含了一个子元素box2,下边的许多案例都会使用这个盒子样式子元素默认在父元素的左上角位置，因为已经知道父元素和子元素的宽高，因此可以使用二者之差的二分之一作为边距宽度即可。
css常用元素水平垂直居中方案
01-19
flex实现水平垂直居中 适用场景：父子宽高都可未知(比较推荐这种方式，简单，而且目前兼容性也不错。) <html> <head> <style> .parent { width: 100%; height: 100px; background: cyan; ...
Flex布局实现div内部子元素垂直居中的示例
01-21
1、Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。        采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main en
前端开发常用知识点一：如何设置子div在父div中垂直居中显示？
weixin_42396597的博客
12-25 3467
在前端开发中，要设置子div在父div中垂直居中的情况有很多，现通过学习一些博主的博客及日常项目实战，总结如下几种最常用的方法： 方法一：display:flex（这是小博主最常用的设置垂直居中的方法！） .parent { width: 300px; height: 200px; ...
如何设置子div在父div中垂直居中显示？（已知或未知父div宽高的7种方法）
qq_36429258的博客
08-03 3045
如何设置子div在父div中垂直居中显示？（已知或未知父div宽高）
div中的内容垂直居中的五种方法
夜空中最亮的星
06-19 968
div中的内容垂直居中的五种方法 一、行高（line-height）法 如果要垂直居中的只有一行或几个文字，那它的制作最为简单，只要让文字的行高和容器的高度相同即可，比如： 1 p { height:30px; line-height:30px; width:100px; overflow:hidden; } 这段代码可以达
[css]div布局子元素相对父元素水平垂直居中的三种简单快速实现
Geezer_007的博客
02-13 1071
/div>.children{top:0;bottom:0;left: 0;right:0;.children{.children{
jQuery与javascript对照学习 获取父子前后元素 实现代码
10-29
jQuery与javascript对照学习(获取父子前后元素) ，需要的朋友可以参考下，看看与js有什么不同。
Vue父子模版传值及组件传值的三种方法
12-29
这里是针对于vue1.0，如果要学2.0，建议大家去看官方文档 vue2.0 ... ...第一种 <div id=example> <my></my> </div> [removed][removed] [removed] //向子组件传递数据 //省略extend方法，vue内部
JavaScript父子窗体间的调用方法
10-24
主要介绍了JavaScript父子窗体间的调用方法,涉及javascript调用窗体的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
子div在父div中居中显示问题
qq_34898847的博客
09-11 5838
子div在父div中居中显示几种css方法 父的div中有一个子的div，让子div在父div的居中显示。 上代码 1：方法一 这方法最好使，我常用的方法 .parent { width:800px; height:500px; border:2px solid #000; position:relative; ...
让div水平居中的7种方法
m0_55673399的博客
07-26 3万+
使div水平居中
CSS子元素在父元素中水平垂直居中的几种方法
weixin_30474613的博客
09-18 766
1. 水平居中(margin: auto;)子父元素宽度固定，子元素上设置 margin: auto; 子元素不能设置浮动，否则居中失效。 #div1{ width: 300px; height: 300px; border: 1px solid red; } ...
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..
关于让div元素垂直居中的几种方法
ZhangLN9297的博客
09-17 2万+
如何用让嵌套在里面的div居中 本人是一个前端新手，如何让两个相互嵌套的div，让里面的div居中是一个比较简单的问题，面试也常问，我就从其他博客中提取稍微总结一下（转载侵删），也加了一点自己的困惑和理解，错误的地方希望能有人指出： 利用position：absolute的特性 设置margin为auto display:table-cell transform flex 方法一：利...
css居中对齐的几种方式
袁成新（Chauncey Yuan）
10-13 761
第一种 css .parent { width: 300px; height: 300px; background: #fff000; display: table-cell; vertical-align: middle; text-align: cen...
如何让子元素在父元素中水平垂直居中七种方法
weixin_43962555的博客
04-03 3585
html: <div class="container"> <div class="box">green</div> </div> 第一种：定位+margin:auto .container { position: relative; width: 300px; height...
子元素在父元素中水平垂直居中的六种方法
october_autumn的博客
03-29 1636
这里介绍六种方法使子元素在父元素中水平垂直居中，并且分析其优缺点。 目录 定位：三种 display: flex JavaScript display: table-cell 首先给出页面结构和默认背景色： （由于在浏览器中的显示结果都是水平垂直居中，所以就不附加运行图了。） HTML <div class="parent"> <div class="child"&g...
子元素相对于父元素水平垂直居中的几种方法
weixin_45571121的博客
08-17 3800
方式一：绝对定位 + margin（需要指定子元素的宽高，不推荐） 1.1 代码及效果: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=d...
vue父子组件传值几种方法 具体代码
最新发布
03-29
1. 父组件向子组件传值，使用 props 属性 父组件： ``` <template> <div> <child-component :message="message"></child-component> </div> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent }, data() { return { message: 'Hello, World!' } } } </script> ``` 子组件： ``` <template> <div> <p>{{ message }}</p> </div> </template> <script> export default { props: ['message'] } </script> ``` 2. 子组件向父组件传值，使用 $emit 方法 父组件： ``` <template> <div> <child-component @send-message="handleMessage"></child-component> <p>{{ receivedMessage }}</p> </div> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent }, data() { return { receivedMessage: '' } }, methods: { handleMessage(message) { this.receivedMessage = message; } } } </script> ``` 子组件： ``` <template> <div> <button @click="sendMessage">Send Message</button> </div> </template> <script> export default { methods: { sendMessage() { this.$emit('send-message', 'Hello, World!'); } } } </script> ``` 3. 使用 provide/inject 传递数据 父组件： ``` <template> <div> <child-component></child-component> </div> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent }, provide() { return { message: 'Hello, World!' } } } </script> ``` 子组件： ``` <template> <div> <p>{{ message }}</p> </div> </template> <script> export default { inject: ['message'] } </script> ```

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

Double-C

你的鼓励将是我创作的最大动力

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

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

打赏作者

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

抵扣说明：

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

余额充值