百度360必应搜狗淘宝本站头条
linux取消挂载yum卸载下横线怎么打mysql 外网访问权限php打乱数组顺序
当前位置：网站首页 > 编程文章 > 正文

html+css实现子元素完全居中常见方案

qiyuwang 2024-10-16 14:04 22 浏览 0 评论

案例一：子元素水平垂直居中

页面布局常遇见需要子元素完全居中显示，因此在此总结常见方案。

让黄色块在父容器（灰色块）中水平、垂直居中

黄色方块：宽高100px

灰色方块：宽高400px

下列方法1到方法7，变换前后的图像都是上面2张图（图标注了长度）

默认代码：

 <!DOCTYPE html>
 <html lang="zh-CN">
 
 <head>
     <meta charset="UTF-8">
     <title>完全居中</title>
     <style>
         .parent {
             width: 400px;
             height: 400px;
             background-color: gray;
         }
 
         .children {
             width: 100px;
             height: 100px;
             background-color: yellow;
         }
     </style>
 </head>
 
 <body>
     <div class="parent">
         <div class="children"></div>
     </div>
 </body>
 </html>

下列方法1到方法7，里css代码都是基于上方默认代码

方法1：弹性布局+主/侧轴中间对齐

 .parent {
     /* 弹性布局 */
     display: flex;
     /* 主轴对齐方式：居中 */
     justify-content: center;
     /* 侧轴对齐方式（单行）：居中 */
     align-items: center;
 }

方法2：弹性布局+margin自动

 .parent {
     /* 弹性布局 */
     display: flex;
 }
 .children {
     margin: auto;
 }

方法3：定位（子绝父相）+margin

 .parent {
     position: relative;
 }
 
 .children {
     position: absolute;
     left: 0;
     right: 0;
     top: 0;
     bottom: 0;
     margin: auto;
 }

方法4：直接计算

分析过程：使用外边距推中间黄色盒子，距离顶端（400-100）/2= 150 px

 .parent {
     /* 因为margin塌陷问题（子容器的外边距会被父容器用掉）：此处需要显示指明父容器溢出方式 */
     overflow: auto;
 }
 
 .children {
     /* 上下150px，左右自动 */
    margin: 150px auto;
 }

方法5： Transform属性

这种方法使用CSS的transform和position属性。这种方法在某些情况下可能比Flexbox或Grid更简单：

  .children {
     position: relative;
     left: 50%;
     top: 50%;
      /* 
      transform：2/3D变换关键字
      translate是2D位移关键字
         x与y都-50%，是因为坐标原点默认是左上角，在left与top移动50%后，黄色盒子处于中心点右下方，因此需要让黄色盒子xy都减去一半
      */
     transform: translate(-50%, -50%);
 }

方法6：Grid布局

CSS Grid也是一个强大的布局工具，它也可以用来实现子元素的水平和垂直居中。以下是一个例子：

 .parent {
     display: grid;
     justify-items: center;/* 水平居中 */
     align-items: center;/* 垂直居中 */
 }

方法7：使用表格布局

通过display设置为table-cell，然后使用text-align 、vertical-align实现水平居中和垂直居中。

 .parent {
     display: table-cell;
     text-align: center;
     vertical-align: middle;
 }
 
 .children {
     display: inline-block;
 }

方法8：变化成行内块

若父元素宽高确定，子元素宽高不确定，用

将children设为行内元素，运用text-align即可实现水平居中，再借助vertical-align在垂直方向上达到居中效果。最后，将children的行高设定为默认值（line-height具有可继承性，需单独调整子元素的行高）。

 <!DOCTYPE html>
 <html lang="zh-CN">
 <head>
     <meta charset="UTF-8">
     <title>完全居中</title>
     <style>
         .parent {
             width: 400px;
             height: 400px;
             background-color: gray;
             text-align: center;
             line-height: 400px;
         }
          
         .children {
             background-color: yellow;
             display: inline-block;
             vertical-align: middle;
             line-height: initial;
         }
     </style>
 </head>
 
 <body>
     <div class="parent">
         <div class="children">child</div>
     </div>
 </body>
 </html>

更多精彩，请关注微信公众号：码圈小橙子

相关推荐

你们想要的Python爬虫教程来了:从原理到实践

概述：网络世界的智能采集者Python爬虫是通过自动化程序模拟人类浏览网页行为的技术工具，其核心价值在于高效获取并解析网络数据。得益于Python丰富的第三方库（如requests、Beautiful...

你需要知道的 19 个 console 实用调试技巧

大家好，我是Echa。之前给大家介绍了《...

CSS布局必备技能

Flex是一种用于布局的CSS属性，它使得在容器中的子元素能够灵活地伸缩和排列，从而实现更加自适应和响应式的布局。使用Flex布局可以轻松地创建各种复杂的布局，而无需使用复杂的CSS或者...

我是如何使用ChatGPT和CoPilot作为编码助手的

...

jsoup Selector类学习笔记，快速提升你的HTML处理能力!

Selector类是jsoup库中的一个核心类，用于通过CSS选择器语法来查找HTML文档中的元素。选择器语法通用选择器*：匹配任何元素。标签选择器tag：匹配指定标签名的元素。...

CSS伪类选择器大全:提升网页交互与样式的神奇工具

CSS伪类选择器是前端开发中不可或缺的强大工具，它们允许我们根据元素的状态、位置或用户行为动态地应用样式。本文将全面介绍常用的伪类选择器，并通过代码示例展示其实际应用场景。一、基础交互伪类1.超链接...

简析JS中Document与CSS

如果你是一名前端人员，你单单的使用jq插件显然不够，js在大多时候比较搁置，但你如果前端技术想要提升，那么js的精通对你显得很重要，本文只是他到js的document与css。1.Document与E...

网页世界隐藏的神秘代码语言，竟能这样改变布局

CSS基础：选择器与属性CSS（CascadingStyleSheets）是用于控制网页外观的一门样式表语言。它通过定义HTML元素的显示方式来增强网页的表现力。CSS的选择器允许开发者精确地定位...

Thymeleaf 语法全面详解(史上最全)

Thymeleaf是一个现代化的服务器端Java模板引擎，支持HTML、XML、JavaScript、CSS甚至纯文本。以下是Thymeleaf语法的全面详解，包含所有属性和复杂用法。...

零基础学习HTML之CSS篇内联内部外部样式表和类型选择符

CSS简介CSS(CascadingStyleSheets)层叠样式表。CSS能做些什么？1.使用CSS样式可以有效地对页面进行布局。2.使用CSS样式可以对页面字体、颜色、背景和其他效果实现...

css 设置盒子阴影，阴影和背景图保持一致

预览图首先查看预览图:原理采用了background属性...

CSS中的定位(postion)详解

定义CSSposition属性用于指定一个元素在文档中的定位方式。top，right，bottom和left属性则决定了该元素的最终位置，z-index属性则决定了该元素所在的层级。定位类型1...

CSS selector 小知识学习分享

在设计器中，大家拾取网页元素后，在右侧的属性栏里都会有一个叫“查找路径”的选择框，一般也很少有人用到，打开后里面显示了一堆‘@#yen#%#yen@*T&’的玩意，那么这个“查找路径”到底是个什...

从网站检查中复制CSS代码的最简单方法

在处理网站项目时，您是否曾经对使用开发工具感到沮丧？必须在您正在处理的网页和检查器之间来回切换以查看CSS并进行调整通常可能是一个挑战。值得庆幸的是，有一个浏览器扩展程序可以简化该过程：CSSSca...

XPath 选择器

上篇《Selenium入门（基于Python）...

取消回复欢迎 你 发表评论:

一周热门
最近发表
标签列表