<布局>子级相对级居中对齐的几种方式

最新推荐文章于 2024-03-29 09:55:44 发布
最新推荐文章于 2024-03-29 09:55:44 发布
阅读量344 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhuoyuedelan/article/details/104153404
版权
3203841-fb1f0a2320f9bd47.png
居中
一. 父元素相对定位, 子元素绝对定位,然后右下偏移top: 50%; left: 50%; 再反向偏移transform: transtlate(-50%, -50%), 如果知道子元素的宽高, 也可以直接把反向偏移写死
    <style>
        .absolute001{

            position: relative;

        }
        .absolute001 .son{

            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }
    </style>

    <style>
        .absolute002{

            position: relative;


        }

        .absolute002 .son{

            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-25px, -50px);


        }



    </style>
二: 与第一种类似,但比较hack, 父元素相对定位,子元素绝对定位,设置margin: auto; 上下左右都为0
    <style>
        .absolute003{

            position: relative;

        }

        .absolute003 .son{

            position: absolute;
            margin: auto;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;

        }

    </style>
三. 父元素使用flex布局, 横向居中, 纵向居中
    <style>
        .flex001{

            display: flex;
            justify-content: center;
            align-items: center;

        }

    </style>
完整测试:
3203841-5c9b07a3cf5b30fd.png
测试 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>元素居中</style>
    <style>


        .father{

            width: 500px;
            height: 200px;
            background-color: #ea6f5a;
            border: 1px solid #d29922;
            margin: 0 auto;
            color: #fdf6e3;
        }

        .son{
            width: 200px;
            height: 100px;
            background-color: #0c8ac5;
        }



    </style>
</head>
<body>

<div class="father absolute001">
    <style>
        .absolute001{

            position: relative;

        }
        .absolute001 .son{

            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }
    </style>
    <div class="son">绝对定位: 无需知道子元素宽高</div>
</div>


<div class="father absolute002">
    <style>
        .absolute002{

            position: relative;


        }

        .absolute002 .son{

            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-100px, -50px);


        }



    </style>
    <div class="son">绝对定位: 需要知道子元素宽高(比较low)</div>
</div>


<div class="father absolute003">
    <style>
        .absolute003{

            position: relative;

        }

        .absolute003 .son{

            position: absolute;
            margin: auto;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;



        }


    </style>
    <div class="son">绝对定位: 无需知道子元素宽高(hack玩法, 记得margin: auto)</div>
</div>


<div class="father flex001">

    <style>
        .flex001{

            display: flex;
            justify-content: center;
            align-items: center;

        }



    </style>


    <div class="son">flex定位:无需知道子元素宽高(好用, 推荐)</div>
</div>

</body>
</html>
zhaoolee
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
wps居中对齐不在中间_wps有时候居中对齐不是在中间
weixin_42469578的博客
12-30 1万+
wps有时候居中对齐不是在中间wps文字设置居中对齐的方法：步骤一：打开WPS文字编辑器。步骤二：在WPS文本框输入一段文字做为实例，例如“百度分享”。步骤三：将光标移动到需要居中的文字，然后按快捷键“Ctrl+E”，文字将会自动居中。步骤四：效果图。时间：2018-07-21 17:45 / 作者：百科全说在平时工作学习中，各种对齐方式是排版不可缺少的功能之一，今天小编为大家介绍一下wps文字中...
-CSS-笔记-
April_Aimer的博客
02-07 2169
目标: 学会使用CSS选择器 熟记CSS样式和外观属性 熟练掌握CSS各种选择器 熟练掌握CSS各种选择器 熟练掌握CSS三种显示模式 熟练掌握CSS背景属性 熟练掌握CSS三大特性 熟练掌握CSS盒子模型 熟练掌握CSS浮动 10.熟练掌握CSS定位 11.熟练掌握CSS高级技巧强化CSS typora-copy-images-to: media CSS的发展历程 从HTML被发明开...
相对布局控件居中属性
fan380485838的专栏
07-24 7779
  android:layout_centerInParent="true"  --将控件置于父控件的中心位置 android:layout_centerHorizontal="true"  --将本控件置于父控件水平方向的中心位置 android:layout_centerVertical="true"  --将本控件置于父控件垂直方向的中心位置...
子节对齐
摩西的专栏
08-28 395
什么是子节对齐考虑下面这样一个结构体定义： struct _student{ 　　 char sex; 　　 int length; 　　 char name[10]; 　　}; 　　struct _student student; 由于在x86下，GCC默认按4字节对齐，它会在sex后面填充3个子节，在name后面填充2个子节，以使得length在内存的4子节整数倍边界上，同时也使得
[CSS]中子元素在父元素中居中
最新发布
qq_29069649的博客
03-29 568
[CSS]中子元素在父元素中居中的方法
使子div垂直居中
u010705091的专栏
02-01 215
//此方法可使当子div的高度是动态调整时，也可使其在父元素里垂直居中 .parent{ width:800px; height:800px; position:relative; background-color:gray; } .son{ width:100px; height:100px; position:absolute; background-col
CSS布局之如何实现居中布局
12-13
在CSS布局中，实现元素的居中对齐是常见的需求，尤其在网页设计中尤为重要。以下将详细讲解几种常见的居中布局方法。 1. **表格布局法**：这种方法适用于子元素内容主要是文本的情况。通过将父级容器设置为`display...
CSS（CSS3）知识点学习
于公子的博客
03-03 8278
CSS（CSS3）自我学习，知识点总结
前端学习（二）CSS基础1
whitefish520的博客
07-22 9164
什么是CSS CSS的引入： 由于HTML只关注内容的语义，导致单纯用HTML做出的网页很丑 在HTML中设置样式非常不方便，也非常繁琐 使用CSS能让网页更加美观 CSS让HTML从样式中脱离，HTML专门做结构，CSS专门做样式 CSS的定义：层叠样式表（Cascading Style Sheets），用来做网页的样式，CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景控制以及整体排版等，而且还可以针对不同的浏览器设置不同的样式 CSS的作用：主要用于设置HTML页面中的文本内容（字体、大
CSS初入门：设置子元素水平居中的方式
lalala_dxf的博客
04-01 5798
问题描述： 用几种方式实现元素位于父元素的水平居中位置，如图： 解决 方式一 通过控制子元素的左边框和右边框来达到居中的效果。 在那之前，我先举个我遇到过的错误示范 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta nam
CSS-布局6-相对父元素居中
weixin_34242658的博客
08-13 514
1、实现效果 实现效果 2、实现思路 （1）使用一个div中，放置3个div内容、红色方块、蓝色方块。 （2）设置div的布局为相对定位，设置红色和蓝色方块的盒子为绝对定位。 （3）设置红色方块盒子top:50%，y轴偏移到中间，但是盒子并不是在中间，通过margin-top:-20px. 向上偏...
Flex布局
qq_41306423的博客
12-23 160
Flex 布局 —— 阮一峰
详解 flex:1 到底是什么
dongwei666的博客
08-10 7193
成功搞懂了flex:1是什么意思！
Flex01：图文详解：flex+j2ee+eclipse+tomcat集成
hw198891的博客
05-18 165
集成需要的工具 Flash Builder 4.6：[url]https://a248.e.akamai.net/client.akamai.com/install/bin/user_client_win_345c617/installer_no_upload.exe?name=Adobe_Flash_Builder_4.6-AkamaiDLM.exe[/url] eclipse 3.7： ...
CSS的布局与居中
simdim的博客
09-13 9140
1.左右布局 给两个div添加 float: left;属性 &lt;body&gt; &lt;div style="border:5px solid red;float:left"&gt; 第一个div&lt;/div&gt; &lt;div style="border:5px solid pink;float:left"&gt;第二个div&lt;/div&amp
如何在一个div中使其子div居中
热门推荐
u012088576的博客
03-30 6万+
网上其他地方已讲述过对其的不同实现方式，今天主要做一个详细的汇总，希望对大家有帮助。 ps：我面试的时候就被问到过这个问题，当时都回答错了，蓝瘦。 假设父div的类名为father，子div的类名为son。在html中的形式如下： &lt;div class="father"&gt; &lt;div class="son"&gt; &lt;/div&gt; 接下来用css设置s...
子元素在父元素中垂直、水平居中——四种方法
otatoz
10-24 1万+
对父元素定位 1-父子元素进行定位，对子元素绝对定位，子元素margin:auto;top:0;left:0;bottom:0;right:0; （定位布局） <div style="width:200px;height:200px; border:solid blue; position:relative;"> ...
LAYOUT SHOW
xiaodongvtion的专栏
11-29 843
<br />android:layout_above 将该控件的底部至于给定ID的控件之上<br /> android:layout_below 将该控件的顶部至于给定ID的控件之下<br /> android:layout_toLeftOf 将该控件的右边缘和给定ID的控件的左边缘对齐<br /> android:layout_toRightOf 将该控件的左边缘和给定ID的控件的右边缘对齐<br /><br /> android:layout_alignBaseline 该控件的baseline
在<li>中有一个<img>和<span>，如何让图标<img>始终在文字<span>的上方且两者都在<li>的左右上下居中
01-30
可以使用CSS的flex布局来实现图标<img>始终在文字<span>的上方且两者都在<li>的左右上下居中。具体步骤如下： 1. 首先，给<li>设置display: flex;和align-items: center;，这样可以使<li>的内容在垂直方向上居中对齐。 2. 然后，给<img>和<span>都设置margin: auto;，这样可以使它们在水平方向上居中对齐。 3. 接下来，给<img>设置display: block;，这样可以使它独占一行。 4. 最后，给<span>设置text-align: center;，这样可以使文字居中对齐。 下面是示例代码： ```html <style> li { display: flex; align-items: center; } img { display: block; margin: auto; } span { margin: auto; text-align: center; } </style> <ul> <li> <img src="icon.png" alt="图标"> <span>文字内容</span> </li> </ul> ``` 这样，图标<img>就会始终在文字<span>的上方且两者都在<li>的左右上下居中了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值