页面布局（4）——居中

最新推荐文章于 2024-08-21 17:37:48 发布
最新推荐文章于 2024-08-21 17:37:48 发布
阅读量54 收藏
点赞数
原文链接：http://www.cnblogs.com/janas-luo/p/9605303.html
版权

垂直居中

<!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>垂直居中</title>
  <style>

  </style>
</head>

<body>
  <!-- 使用table-cell+vertical-align -->
  <div style="display:table-cell;vertical-align:middle;height:30px">
    <div >使用table-cell+vertical-align</div>
  </div>
 <!-- 使用absolute+transform -->
 <div style="position:relative;height:30px;">
    <div style="position:absolute;top:50%;transform:translateY(-50%);">使用absolute+transform</div>
  </div>
  <!-- 使用flex+align-items -->
  <div style="display: flex;align-items:center;height:30px;">
      <div >使用flex+align-items</div>
    </div>
</body>

</html>

水平居中

<!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>水平居中</title>
  <style>
    /* .parent1 {
      text-align: center;
    }
    .child1 {
      display: inline-block;
    }

    .child2 {
      display: table;
      margin: 0 auto;
    }

    .parent3 {
     display: flex;
    }
    .child3 {
      margin: 0 auto;
    }

    .parent4 {
     display: flex;
     justify-content:center;
    } */

  </style>
</head>

<body>
  <!-- 使用inline-block+text-align -->
  <div class="parent1" style="text-align: center;">
    <div class="child1" style="display: inline-block;">使用inline-block+text-align</div>
  </div>
  <!-- 使用table+margin -->
  <div class="parent2" >
    <div class="child2" style="display: table; margin: 0 auto;">使用table+margin</div>
  </div>
  <!-- 使用text-align+margin -->
  <div >
      <div style="text-align:center; margin: 0 auto;">使用text-align+margin</div>
    </div>
  <!-- 使用flex+margin -->
  <div class="parent3" style="display: flex;">
    <div class="child3" style="margin: 0 auto;">使用flex+margin</div>
  </div>
  <!-- 使用flex+justify-content -->
  <div class="parent4" style="display: flex;justify-content:center;">
    <div class="child4" >使用flex+justify-content</div>
  </div>
  <!-- 使用absolute+transform -->
  <div style="position:relative;">
    <div style="position:absolute;left:50%;transform:translateX(-50%);">使用absolute+transform</div>
  </div>
</body>

</html>

水平垂直居中

<!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>水平垂直居中</title>
  <style>

  </style>
</head>

<body>
  <!--使用absolute+transform-->
  <div style="position:relative;height:30px;">
    <div style="position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);">使用absolute+transform</div>
  </div>
  <!--使用absolute+margin-->
  <div style="position:relative;height:30px;">
      <div style="position:absolute;top:50%;left:50%;margin:-10px 0 0 -69px">使用absolute+transform</div>
    </div>
  <!-- flex+justify-content+align-items -->
  <div style="display: flex;align-items:center;justify-content:center;height:30px;">
    <div >使用flex+align-items</div>
  </div>
  <!--使用absolute+top/bottom/right/left+height/width-->
  <div style="position:relative;height:100px">
    <div style="position:absolute;top:0;left:0;bottom:0;right:0;margin:auto;height:50px;width:100px;">使用absolute+top/bottom/right/left+height/width</div>
  </div>
</body>

</html>

转载于:https://www.cnblogs.com/janas-luo/p/9605303.html

weixin_34235135
关注
页面布局——浮动布局
weixin_43913877的博客
11-02 1172
** 页面布局——浮动布局 浮动布局是页面的一种重要布局方式 它使用float属性为元素开启浮动，float属性的可选值有left、right、none none 是默认值，即不开启浮动 left向 左浮动，靠父元素的左边浮动 right向 右浮动，靠父元素右边浮动 元素浮动后的特点 浮动元素完全脱离文档流，不再占据文档流中的位置 块级元素（block）、行内元素（inline）、行内块元素（inline-block）脱离文档流的特点：不再独占一行，宽高默认由内容撑开，但可以为其设置自定义宽高，即
单列通栏布局版式示意HTML,整体布局2——页面排版布局
weixin_39969611的博客
06-19 3311
一、页面整体布局说明网页总共由三部分组成页面顶部、页面正文、页面底部。页面顶部和页面底部一旦进行了设计，那么无论是新建网页还是选择系统内页都会是统一的头部和底部，所以我们设计一般是对正文进行布局。如何区分页面的头部和底部、正文部分。如图所示：所以，一般网站首页做了网站头部和底部的设计，内页会直接继承过来，都是统一的头部和底部，内页就只需设计网站正文部分。二、页面布局——容器组件的使用对页面进行布局...
html表格框架居中,页面架构——居中布局
weixin_29023079的博客
06-19 704
水平居中使用inline-block+text-align实现子模块在父模块中居中例：.child{ display: inline-block; } .parent{ text-align: center; } Demo优点：兼容性比较好，能兼容IE6，7使用table+margin例：.child{ display: table; margin: 0 auto; } Demo优点：不需要设置父...
uniapp下页面布局分析三——元素垂直居中
lsjweiyi的博客
04-15 1万+
本文继续前面的内容，App.vue采用了flex布局 垂直居中还是有点难度的。 但是习惯使用flex布局后，又能简单的实现。 页面只有一个元素 <template> <view class="center"> <view style="background-color: blue">居中文字</view> </view> </template> <style> .center {
前端布局之——水平垂直居中
YaoDeBiAn的博客
09-17 1378
前端垂直居中布局 前端页面的居中是平常开发中比较常见的布局，以下将从水平居中、垂直居中、水平垂直居中三个角度分析不同的布局方法。 水平居中 法一：行内元素水平居中 html: <div class="container"> <div class="box"></div> </div> css: .container { text-align...
HarmonyOS 实战开发——页面布局方式
YHDMYBY的博客
08-21 1000
一个丰富的页面需要很多组件组成，那么，我们如何才能让这些组件有条不紊地在页面上布局呢？这就需要借助容器组件来实现。容器组件是一种比较特殊的组件，它可以包含其他的组件，而且按照一定的规律布局，帮助开发者生成精美的页面。容器组件除了放置基础组件外，也可以放置容器组件，通过多层布局的嵌套，可以布局出更丰富的页面。ArkTS为我们提供了丰富的容器组件来布局页面，本文将以构建登录页面为例，介绍Column和Row组件的属性与使用。
pyecharts丨页面布局工具——Page 和 Grid
热门推荐
qq_39496504的博客
07-06 2万+
让多张图表展示在同一页面一、 令图表垂直布局——Page二、 令图表水平布局——GridP.S. 如何让两个饼图平行排列？P.P.S. 如何让两张纯图片平行排列？P.P.P.S 如何让两个词云水平排列？ 比如我想达到的效果图是这样： 就要用到pyecharts中的page和grid布局。其中page帮助我们将多个模块垂直组合到一个页面中，grid帮助我们将多个单元素（图、表、overlap、图片）水平或垂直并列布局。 先从相对简单的page说起。 一、 令图表垂直布局——Page 首先import类
CSS——页面布局
qq_42676176的博客
07-24 950
CSS——网络布局盒子1.网页布局2.盒子模型组成3.浮动4.定位为5.常见的网页布局总结分析注意（小技巧）：
微信小程序页面的基本布局方法——flex布局
m0_58859743的博客
07-13 8982
微信小程序布局-flex布局。 掌握最基本的组件布局方法，设计出自己心仪的页面布局你也可以做到！加油！！！
Android开发——页面布局
Elon15的博客
09-27 449
Android开发——页面布局
html块级页面居中,HTML+CSS实现页面豆腐块布局和图片居中
weixin_34221599的博客
06-03 645
网页豆腐块布局，图片等比压缩并且实现上下左右居中.box {/*最外层的大div*/width: 1040px;margin: 0 auto;/*上下间距为0，左右页面空白自适应并且相等可以达到横向居中的效果使整个div在浏览器窗口左右居中*/overflow: hidden;}.box1 {/*第二层div*/float: left;width: 1020px;padding-left: 20p...
CSS布局篇——浮动布局
qq_51563529的博客
08-31 554
- 什么是网页的布局方式? 网页的布局方式其实就是指浏览器是如何对网页中的元素进行排版的 - 标准流(文档流/普通流)排版方式 标准流(文档流/普通流) -标准流(文档流/普通流)处在网页的最底层，它表示的是一个页面中的位置，我们所创建的元素默认都 处在标准流(文档流/普通流)中。 ​ -元素在标准流(文档流/普通流)中的特点 ​ 块元素 ​ 1.块元素在标准流(文档流/普通流)中会独占一行，块元素会自上向下排列。 ​ 2.块元素在标准流(文档流/普通流)中默认宽度是父元素的100% ​
基于Kotlin的zeta项目代码生成器设计源码
09-23
该项目是基于Kotlin语言的zeta项目专用代码生成器设计源码，包含30个文件，其中包括20个btl模板文件、6个Kotlin源文件、1个Git忽略文件、1个LICENSE文件、1个Markdown文档以及1个XML配置文件，旨在为zeta-kotlin项目提供高效的代码自动生成功能。
ASP+SQL2005金居客房产网整站源码.rar
09-23
项目工程资源经过严格测试可直接运行成功且功能正常的情况才上传，可轻松copy复刻，拿到资料包后可轻松复现出一样的项目，本人系统开发经验充足（随意编程），有任何使用问题欢迎随时与我联系，我会及时为您解惑，提供帮助 【资源内容】：项目具体内容可查看/点击本页面下方的*资源详情*，包含完整源码+工程文件+说明（若有）等。【若无VIP，此资源可私信获取】 【本人专注IT领域】：有任何使用问题欢迎随时与我联系，我会及时解答，第一时间为您提供帮助 【附带帮助】：若还需要相关开发工具、学习资料等，我会提供帮助，提供资料，鼓励学习进步 【适合场景】：相关项目设计中，皆可应用在项目开发、毕业设计、课程设计、期末/期中/大作业、工程实训、大创等学科竞赛比赛、初期项目立项、学习/练手等方面中 可借鉴此优质项目实现复刻，也可基于此项目来扩展开发出更多功能 #注 1. 本资源仅用于开源学习和技术交流。不可商用等，一切后果由使用者承担 2. 部分字体及插图等来自网络，若是侵权请联系删除，本人不对所涉及的版权问题或内容负法律责任。收取的费用仅用于整理和收集资料耗费时间的酬劳 3. 积分资源不提供使用问题指导/解答
基于Java和JavaScript的学生会管理系统设计源码
最新发布
09-23
该项目是一个基于Java和JavaScript的学生会管理系统设计源码，包含230个文件，涵盖了49个Java源文件、27个JavaScript脚本、11个CSS样式表、5个HTML页面、6个XML配置文件、1个Git忽略文件、1个JAR包文件以及多种图片格式（75个GIF、26个PNG、19个JPG）。系统界面友好，功能全面，适合高校学生会使用以提高管理效率。
【数字信号去噪】基于matlab人工蜂群算法ABC-ICEEMDAN信号去躁【含Matlab源码 7624期】.zip
09-23
CSDN海神之光上传的代码均可运行，亲测可用，直接替换数据即可，适合小白； 1、代码压缩包内容 主函数：main.m； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2019b或2023b；若运行有误，根据提示修改；若不会，私信博主； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开main.m文件； 步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可私信博主或扫描博客文章底部QQ名片； 4.1 博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作 功率谱估计： 故障诊断分析： 雷达通信：雷达LFM、MIMO、成像、定位、干扰、检测、信号分析、脉冲压缩 滤波估计：SOC估计 目标定位：WSN定位、滤波跟踪、目标定位 生物电信号：肌电信号EMG、脑电信号EEG、心电信号ECG 通信系统：DOA估计、编码译码、变分模态分解、管道泄漏、滤波器、数字信号处理+传输+分析+去噪（CEEMDAN）、数字信号调制、误码率、信号估计、DTMF、信号检测识别融合、LEACH协议、信号检测、水声通信
IMG_20240923_224046.jpg
09-23
IMG_20240923_224046.jpg
【SCI2区】基于matlab VMD-混沌博弈算法CGO-LSTM光伏预测【含Matlab源码 7667期】.zip
09-23
CSDN海神之光上传的全部代码均可运行，亲测可用，直接替换数据即可，适合小白； 1、代码压缩包内容 主函数：Main.m； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2023b；若运行有误，根据提示修改；若不会，可私信博主； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开除Main.m的其他m文件； 步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可私信博主或扫描博主博客文章底部QQ名片； 4.1 CSDN博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作 VMD-智能优化算法优化LSTM回归预测系列程序定制或科研合作方向： 4.4.1 VMD-遗传算法GA/蚁群算法ACO优化LSTM回归预测 4.4.2 VMD-粒子群算法PSO/蛙跳算法SFLA优化LSTM回归预测 4.4.3 灰狼算法GWO/狼群算法WPA优化LSTM回归预测 4.4.4 VMD-鲸鱼算法WOA/麻雀算法SSA优化LSTM回归预测 4.4.5 VMD-萤火虫算法FA/差分算法DE优化LSTM回归预测 4.4.6 VMD-其他优化算法优化LSTM回归预测
基于opencv和桨式OCR的工业流程图识别系统
09-23
基于opencv和桨式OCR的工业流程图识别系统。
CSS浮动布局实战：页面左侧板块ContentL详细解析
作者通过一个具体的例子——创建一个包含标题和内容的左侧板块（ContentL）来讲解如何利用浮动实现页面布局。 在页面布局中，CSS的浮动属性(float)是一个重要的概念，它允许元素脱离正常文档流并在其父元素内侧浮动...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值