百分比布局中的居中

最新推荐文章于 2021-10-15 22:21:12 发布
最新推荐文章于 2021-10-15 22:21:12 发布
阅读量251 收藏
点赞数
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/96weibin/p/7767550.html
本文介绍了三种实现网页元素在父容器内垂直及水平居中的方法：使用em/rem单位配合line-height属性；利用transform属性结合绝对定位；以及采用Flexbox布局实现居中效果。这些方法适用于不同场景和浏览器环境。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

百分比布局   垂直&水平居中的几种方法  

1.以em/rem设置宽度和高度   
 父级设置 width:5rem; height:5rem; text-align:center; 
 子集设置 line-height:5rem; 
2.利用trunsform 
 父级设置 width:5rem; height:5rem; position:relative 
 子集设置 position:absolute; top:50%;left50%;  transform:translate(-50%,-50%); 
3.高版本浏览器   
 父级设置 display-flex;  justify-content:center; align-items:center;

　　

　　开通 博客园的 第一天 好开心(*^▽^*)

转载于:https://www.cnblogs.com/96weibin/p/7767550.html

移动web网页开发（上篇）——流式布局（百分比布局）和Flex弹性布局
m0_53619602的博客
06-09 1465
前面我们学习的一直都是pc端的页面布局，也称为传统布局。传统布局的优点在于兼容性好，但它局限性除了布局繁琐外，在移动端不能很好的布局。为了解决这个问题就出现了两个xuanze——单独制作移动端的页面和响应式页面。 单独制作移动端页面可以分为流式布局（百分比布局），flex弹性布局，less+rem+媒体查询布局，混合布局。...
页面的百分比布局
qq_35315439的博客
08-15 4906
写一个产业图谱的页面已经很久，却从没有进行复盘过。自己细细一想，自己写的页面，对它总体的把控却没有。感觉一个页面是在修修补补中完成的。所以特定总结一个百分比的页面布局。 知识点： 基本的Html页面构成： //<!DOCTYPE> 声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。 <!doctype html> <html> <head> <meta charset="utf-8">
百分比布局div及img水平垂直居中
sunmagine的博客
08-15 675
HTML部分： &lt;div class="outmiddle"&gt; &lt;div class="middle"&gt; &lt;img src="../../assets/img/telecom/introduce.png"&gt; &lt;/div&gt; &lt;/div&gt; CSS部分： .outmiddle{ width: 100%
CSS Transform让百分比宽高布局元素水平垂直居中
笔记
10-26 818
CSS Transform让百分比宽高布局元素水平垂直居中 很早以前了解过当元素是固定宽度和高度的时候，水平垂直高居中的方法可以设置margin的负值来使其居中，这个负值是元素的宽和高的一半，比如宽高是100px，那么就用margin-left:-50px;margin-top:-50px这样的写法。但如果这个元素的宽高是用百分比表示呢？ 如果使用百分比来设置宽高的话，以前哪个负值方法已经用不上了，这个我们发现在一个小的窍门，就是使用CSS3中的transform的translate转换属性。下面来
html高度百分比居中,HTML-移动端如何使用css让百分比布局的弹窗水平和垂直方向上居中_html/css_WEB-ITnose...
weixin_28995873的博客
06-10 213
pc端让一个弹窗水平和垂直方向居中，在知道弹窗宽高的情况下很好计算，只需要用如下css即可：#date{ width: 300px; height: 300px; position: absolute; top: 50%; left: 50%; margin-left: -150px; margin-top: -150px;}但是到了移动端，如果写百分比布...
通过html5的百分比进行居中
milijiangjun的博客
10-09 1340
Document .block { height: 300px; text-align: center; border:1px solid red;} .block:before { content: ''; display: inline-block; height: 100%; vertical-align: middle; /* margin-right: -
html高度百分比居中,HTML+CSS入门 百分比宽高div居中并垂直居中问题解读
weixin_39993301的博客
06-10 273
本篇教程介绍了HTML+CSS入门 百分比宽高div居中并垂直居中问题解读，希望阅读本篇文章以后大家有所收获，帮助大家HTML+CSS入门。<html>关于div居中html,body{height:100%;}.div1{width:60%;height:40%;border:1pxsolid#000000;}.div2{width:40%;height:45%...
百分比控制文字上下居中
03-14
利用百分比控制文字上下居中，纯css控制，div布局，通过百分比控制文字垂直居中
自定义viewgroup实现百分比布局
07-17
百分比布局是一种能够根据父容器大小动态调整子视图大小的布局方式，尤其在响应式设计中非常实用。本示例是一个非Google官方提供的百分比布局实现，旨在帮助开发者理解和实践自定义布局。 一、自定义ViewGroup的...
Android ConstraintLayout布局使用详解
热门推荐
华至的博客
08-21 5万+
Android ConstraintLayout是谷歌推出替代PrecentLayout的组件。支持相对布局、线性布局、帧布局，笔者看来更像是FrameLayout 、LinearLayout、RelativeLayout三者的结合体，并且比这三者更强大的是实现了百分比布局，大家都知道安卓碎片严重，使用百分比适配，那么将彻底解决适配问题。 本文将教会你如何使用此控件。 一、当作Relative...
html按比例缩放 居中,JS控制图片按比例缩放并不超过一定宽度和高度（居中对齐）...
weixin_42365492的博客
06-30 482
//JS控制图片按比例缩放并不超过一定宽度和高度(两种方法，在此使用第二种)function Wa_SetImgAutoSize(obj) {//var img=document.all.img1;//获取图片var img = obj;var MaxWidth = 630; //设置图片宽度界限var MaxHeight = 360; //设置图片高度界限var HeightWidth = im...
百分比高度DIV如何垂直居中
weixin_33716941的博客
05-16 246
问题： 如何使百分比高度子DIV在父元素中居中？ 思路如下： 引入一个中间DIV，使DIV成为目标DIV的父元素（即嵌套加深一层），且相对于目标DIV原本父元素top:50%; ，然后再对目标DIV相对中间DIVwidth:100%;height:100%;top:-50%; ，即可完成垂直居中 HTML代码如下： <div id="box"> <...
高度百分比文字如何垂直居中
weixin_33912246的博客
02-26 1038
一.常用方式 让文字水平垂直居中通常使用的方法是:text-align: center(水平居中);line-height: 20px(垂直居中);值得注意的是line-height的值必须是固定值，即该元素的高度必须固定。 二.引出问题 <!DOCTYPE html> <html lang="en"> <head> &l...
div高度设为百分比内容上下居中
SuiXJ7083的博客
04-02 549
div高度设为百分比内容上下居中 height: 50%; display: flex; justify-content: center; align-items: center;
android constraintlayout垂直居中_强大的 ConstraintLayout
weixin_39525933的博客
11-02 2001
(给安卓开发精选加星标)来自：简书，作者：QuincySxhttps://www.jianshu.com/p/036c6ec288d简介现在改为默认使用 ConstraintLayout 布局，今天我们简单看看这个布局的使用。ContraintLayout 是一个 Google 发布的一个新布局( 翻译成中文 “约束布局“ )它的使用方式有两种在 AS 2.3 以上版本都可以使用鼠标拖动...
使用ConstraintLayout实现自定义缩放布局（百分比布局）
qq_41011723的博客
10-15 4022
一个复杂的布局或自定义View如何在添加到其他不同大小的ViewGroup中按比例去缩放自己的布局内容呢？我尝试使用ConstraintLayout解决了这个问题。 1. 简单的布局 大家先看一个简单的布局，由上下两个view组成，都是16:9的比例。 左边是设置android:layout_width="match_parent"的情况，右边是将layout_width设为了200dp，模拟缩小到宽为200dp的View。大家可以发现的是他们实现等比缩小了。实现原理也很简单，就是通过ConstraintL
百分比宽度div如何水平居中
个人IT博客
05-15 5476
HTML代码如下： CSS样式如下： #box{ position: relative; } #container{ position: absolute; width:30%; height:100px; background: #ccc; } 关键点在于： 需要水平居中元素的父元素需相对定位，本身则绝对定位，并给出 left: 0; right: 0; mar
ConstraintLayout 属性详解 和Chain的使用
weixin_33963594的博客
05-24 1101
想看我更多文章:【张旭童的博客】blog.youkuaiyun.com/zxt0601想来gayhub和我gaygayup:【mcxtzhang的Github主页】github.com/mcxtzhang 概述 小伙伴们好久不见，我又回来啦。说实话这篇文章写的算是比较晚了，距离ConstraintLayout出现至今已经有一年了。且自AS2.3起创建新的Activity,默认的layout根布局就是Con...
ConstraintLayout利用百分比属性来解决一些简单的适配问题（四）
wzlyd1的专栏
11-07 2万+
接着上一篇文章讲 ConstraintLayout属性之Group，GuideLine（三） 先前的几篇文章只是讲了一下ConstraintLayout的基本属性，都很简单，感觉没有眼前一亮的感觉，接下来要讲的东西也很简单，但是会很实用，尤其是在屏幕适配方面，如果运用的灵活，简直美滋滋。 在平时写布局的时候我们通常都是以dp为单位的，这也是google推崇的一种方式，但是dp并不能完全适配所有的手...
lvgl flax布局中垂直居中
最新发布
05-01
<think>好的，用户想在LVGL中使用Flex布局实现内容的垂直居中。根据之前的对话，用户之前遇到了滚动条不显示的问题，现在转向布局问题，可能是在调整布局时遇到了困难。首先，我需要回忆LVGL的Flex布局相关属性。根据引用[1]，Flex布局的侧轴对齐属性有flex-start、flex-end、center、baseline、stretch，其中center可以实现侧轴的居中。而用户的需求是垂直居中，所以需要确定在Flex布局中如何设置侧轴对齐方式。 接下来，查看用户提供的引用[2]中的示例代码，其中使用了lv_obj_set_flex_flow设置行排列和换行，但没有明确设置对齐方式。引用[4]提到了对齐方式，但主要是关于控件在父容器中的对齐，可能和Flex布局的对齐不同。不过，LVGL的Flex布局可能使用类似CSS Flexbox的模型，主轴和侧轴的概念，所以需要设置侧轴对齐为居中。 用户的问题是如何在Flex容器中让子元素垂直居中。假设容器使用列布局，主轴是垂直方向，侧轴是水平方向，但如果容器是行布局，主轴是水平，侧轴是垂直。需要明确Flex流的方向。例如，如果使用LV_FLEX_FLOW_COLUMN，主轴是垂直，侧轴是水平，这时设置侧轴对齐为center会让子元素水平居中，而主轴上可能需要设置其他属性。但用户需要垂直居中，可能需要调整主轴的排列方式或者侧轴的对齐方式。 根据引用[1]中的属性，侧轴对齐设置align-items为center，可以实现垂直居中，如果Flex方向是行（row），那么侧轴是垂直方向，此时设置align-items: center即可垂直居中。在LVGL中，对应的函数可能是lv_obj_set_style_flex_align，需要确认参数是否正确。例如，设置父容器的flex_align属性为LV_FLEX_ALIGN_CENTER，同时确认Flex流的方向是否正确。 此外，引用[3]提到使用flex布局的垂直居中方法，即父容器设置display:flex和align-items:center，这在LVGL中对应的应该是设置Flex布局并调整对齐属性。因此，关键步骤是创建Flex容器，设置方向为列或行，然后设置侧轴对齐方式为居中。 可能需要检查LVGL版本，因为不同版本的API可能不同。例如，在LVGL 8.x中，可能需要使用lv_obj_set_flex_align函数，而在更早版本中可能有不同的方法。根据引用[4]中的对齐方式，但这里更多是关于控件的位置对齐，而不是Flex布局内部的对齐。 另外，用户可能需要确保容器的高度足够，或者子元素的高度正确，否则可能无法正确居中。例如，容器的高度需要明确设置，或者使用百分比，子元素可能需要设置高度或使用内容高度。 综合以上信息，正确的做法是创建一个Flex容器，设置其方向为列或行，然后设置侧轴对齐方式为center。如果方向是行，侧轴是垂直方向，这样设置侧轴对齐为center即可垂直居中子元素。同时，需要确保容器和子元素的尺寸正确，以便有足够的空间进行居中显示。</think>在LVGL中使用Flex布局实现垂直居中，可参考以下实现方案： ### 一、基础配置步骤 1. **创建Flex容器** ```c lv_obj_t * cont = lv_obj_create(lv_screen_active()); lv_obj_set_size(cont, 200, 200); // 设置容器尺寸 lv_obj_center(cont); // 居中容器本身[^4] ``` 2. **启用Flex布局并设置方向** ```c lv_obj_set_flex_flow(cont, LV_FLEX_FLOW_COLUMN); // 垂直方向布局 ``` 3. **关键样式设置** ```c // 设置主轴（垂直方向）和侧轴（水平方向）对齐方式 lv_obj_set_style_flex_main_place(cont, LV_FLEX_ALIGN_CENTER, 0); // 垂直居中 lv_obj_set_style_flex_cross_place(cont, LV_FLEX_ALIGN_CENTER, 0); // 水平居中[^1] ``` ### 二、完整示例代码 ```c #include "lvgl.h" void flex_vertical_center_demo(void) { // 创建容器 lv_obj_t * cont = lv_obj_create(lv_screen_active()); lv_obj_remove_style_all(cont); // 清除默认样式 lv_obj_set_size(cont, 200, 200); lv_obj_center(cont); // 设置Flex布局 lv_obj_set_flex_flow(cont, LV_FLEX_FLOW_COLUMN); lv_obj_set_style_flex_main_place(cont, LV_FLEX_ALIGN_CENTER, 0); lv_obj_set_style_flex_track_place(cont, LV_FLEX_ALIGN_CENTER, 0); // 添加子元素 for(int i = 0; i < 3; i++) { lv_obj_t * btn = lv_button_create(cont); lv_obj_set_size(btn, 100, 40); lv_obj_t * label = lv_label_create(btn); lv_label_set_text_fmt(label, "Btn %d", i+1); lv_obj_center(label); } } ``` ### 三、关键配置说明 1. **主轴对齐方式** ```c lv_obj_set_style_flex_main_place(cont, LV_FLEX_ALIGN_CENTER, 0); ``` 控制垂直方向（主轴）的间距分布 2. **侧轴对齐方式** ```c lv_obj_set_style_flex_cross_place(cont, LV_FLEX_ALIGN_CENTER, 0); ``` 确保水平方向（侧轴）居中显示 3. **容器尺寸要求** - 必须显式设置容器高度 - 子元素总高度应小于容器高度才能产生居中效果 ### 四、效果验证 ![示意图] ``` +------------------+ | | | [ Button1 ] | | [ Button2 ] | | [ Button3 ] | | | +------------------+ ``` ### 五、常见问题处理 1. **内容溢出处理** ```c lv_obj_set_scrollbar_mode(cont, LV_SCROLLBAR_MODE_OFF); // 禁用滚动 lv_obj_set_style_pad_all(cont, 10, 0); // 添加内边距 ``` 2. **动态内容更新** ```c lv_obj_update_layout(cont); // 内容变更后刷新布局 ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值