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

最新推荐文章于 2023-02-13 14:29:38 发布
最新推荐文章于 2023-02-13 14:29:38 发布
阅读量9.9k 收藏 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
    评论
子元素在父元素中水平和垂直居中的几种方法
usernameID007的博客
08-06 2204
通过将父容器的display属性设置为flex，并设置justify-content和align-items属性为center，可以使元素在父容器中水平和垂直居中。通过将元素的position属性设置为absolute，以及使用top、left、right和bottom属性，可以将元素相对于其父容器进行定位。将父容器的display属性设置为table，将子元素的display属性设置为table-cell，并使用vertical-align属性设置为middle，可以实现元素在父容器中垂直居中。
前端开发常用知识点一：如何设置子div在父div中垂直居中显示？
weixin_42396597的博客
12-25 3472
在前端开发中，要设置子div在父div中垂直居中的情况有很多，现通过学习一些博主的博客及日常项目实战，总结如下几种最常用的方法： 方法一：display:flex（这是小博主最常用的设置垂直居中的方法！） .parent { width: 300px; height: 200px; ...
如何设置子div在父div中垂直居中显示？（已知或未知父div宽高的7种方法）
qq_36429258的博客
08-03 3110
如何设置子div在父div中垂直居中显示？（已知或未知父div宽高）
[css]div布局子元素相对父元素水平垂直居中的三种简单快速实现
Geezer_007的博客
02-13 1085
/div>.children{top:0;bottom:0;left: 0;right:0;.children{.children{
CSS子元素在父元素中水平垂直居中的几种方法
weixin_30474613的博客
09-18 783
1. 水平居中(margin: auto;)子父元素宽度固定，子元素上设置 margin: auto; 子元素不能设置浮动，否则居中失效。 #div1{ width: 300px; height: 300px; border: 1px solid red; } ...
子元素在父元素中如何水平垂直居中，即放置在最中心位置
zhongqingtian的博客
05-27 646
子元素在父元素中如何水平垂直居中，即放置在最中心位置
css常用元素水平垂直居中方案
01-19
flex实现水平垂直居中 适用场景：父子宽高都可未知(比较推荐这种方式，简单，而且目前兼容性也不错。) <html> <head> <style> .parent { width: 100%; height: 100px; background: cyan; ...
Vue父子模版传值及组件传值的三种方法
08-28
本文将介绍三种常见的父子模板传值及组件传值的方法，适用于Vue 1.0版本。对于Vue 2.0及更高版本，官方文档提供了更详尽的指南，推荐查阅官方文档以获取最新和最准确的信息。 ### 第一种：Prop绑定 这种方法是最...
jQuery与javascript对照学习 获取父子前后元素 实现代码
10-29
jQuery与javascript对照学习(获取父子前后元素) ，需要的朋友可以参考下，看看与js有什么不同。
JavaScript父子窗体间的调用方法
10-24
主要介绍了JavaScript父子窗体间的调用方法,涉及javascript调用窗体的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
子div在父div中水平居中
qq_41277245的博客
04-04 4569
父div加上样式：display:flex;justify-content:center;align-items:center;有多个子div也能水平居中
如何让子div在父div中水平居中？
hahhahahaa的博客
06-13 1398
&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;style&gt;#box{    border: 1px solid gray;    width: 100%;} #zhongjian{    height: 120px;     width: 340px;    background: yellow;    margin-left: auto;...
css中已知宽高的子元素水平垂直居中的三种方法
木头房子的格子铺
08-04 2441
css中子元素水平垂直居中三种的方法
子div在父div中居中,方便自己以后查找
Web_Student的博客
04-23 701
子div在父div中居中 方法一（使用绝对布局）： 弊端：必须要知道这个容器的长宽，因为在子元素中的 margin-top:-100px; margin-left:-100px; 这两个样式分别是子元素长、宽的一半 .father { 　　width: 500px; 　　height: 500px; 　　position: relative; 　　background-color: red; } ...
CSS之两个div，如何让子元素div在父元素div中垂直水平居中
CongJiYong的博客
07-22 824
CSS之两个div，如何让子元素div在父元素div中垂直水平居中 方法1 .father{ width:1000px; height:500px; border:1px solid #f40; position:relative; } .son{ width:200px; height:200px; border:1px solid #f40; position:absolute; top:0; bottom:0; left:0; right:0; margin:auto;
让父级div中子div居中的方法
Almond's Blog
11-30 4435
 HTML代码如下： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"
嵌套盒子，让子div在父div中居中
xuemoKingDeath的博客
04-23 9155
html> html lang="en"> head> meta charset="UTF-8"> style> #parent{ width: 300px; height: 300px; background-color: #cccccc; overflow: hidd
CSS 元素垂直居中的 6种方法
热门推荐
wolinxuebin的专栏
05-30 45万+
转自：http://blog.zhourunsheng.com/2012/03/css-%E5%85%83%E7%B4%A0%E5%9E%82%E7%9B%B4%E5%B1%85%E4%B8%AD%E7%9A%84-6%E7%A7%8D%E6%96%B9%E6%B3%95/利用CSS进行元素的水平居中，比较简单，行级元素设置其父元素的text-align center，块级元素设置其本身的left
Flex布局实现div内部子元素垂直居中
fengchengwu2012的博客
01-04 1万+
1、Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。 采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex ...
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、付费专栏及课程。

余额充值