百度360必应搜狗淘宝本站头条
mybatis 使用python中+=代表什么java中switch盒子垂直居中httpservletrequest 获取参数
当前位置：网站首页 > 技术文章 > 正文

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

wxin55 2024-11-07 13:09 19 浏览 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>

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

相关推荐

ES6中 Promise的使用场景?（es6promise用法例子）

一、介绍Promise，译为承诺，是异步编程的一种解决方案，比传统的解决方案（回调函数）更加合理和更加强大在以往我们如果处理多层异步操作，我们往往会像下面那样编写我们的代码doSomething(f...

JavaScript 对 Promise 并发的处理方法

Promise对象代表一个未来的值，它有三种状态：pending待定，这是Promise的初始状态，它可能成功，也可能失败，前途未卜fulfilled已完成，这是一种成功的状态，此时可以获取...

Promise的九大方法（promise的实例方法）

1、promise.resolv静态方法Promise.resolve(value)可以认为是newPromise方法的语法糖,比如Promise.resolve(42)可以认为是以下代码的语...

360前端一面~面试题解析（360前端开发面试题）

1.组件库按需加载怎么做的，具体打包配了什么-按需加载实现：借助打包工具（如Webpack的require.context或ES模块动态导入），在使用组件时才引入对应的代码。例如在V...

前端面试-Promise 的 finally 怎么实现的?如何在工作中使用?

Promise的finally方法是一个非常有用的工具，它无论Promise是成功（fulfilled）还是失败（rejected）都会执行，且不改变Promise的最终结果。它的实现原...

最简单手写Promise，30行代码理解Promise核心原理和发布订阅模式

看了全网手写Promise的，大部分对于新手还是比较难理解的，其中几个比较难的点：状态还未改变时通过发布订阅模式去收集事件实例化的时候通过调用构造函数里传出来的方法去修改类里面的状态，这个叫Re...

前端分享-Promise可以中途取消啦（promise可以取消吗）

传统Promise就像一台需要手动组装的设备，每次使用都要重新接线。而Promise.withResolvers的出现，相当于给开发者发了一个智能遥控器，可以随时随地控制异步操作。它解决了三大...

手写 Promise（手写输入法 中文）

前言都2020年了，Promise大家肯定都在用了，但是估计很多人对其原理还是一知半解，今天就让我们一起实现一个符合PromiseA+规范的Promise。附PromiseA+规范地址...

什么是 Promise.allSettled()!新手老手都要会?

Promise.allSettled()方法返回一个在所有给定的promise都已经fulfilled或rejected后的promise，并带有一个对象数组，每个对象表示对应的pr...

前端面试-关于Promise解析与高频面试题示范

Promise是啥，直接上图：Promise就是处理异步函数的API，它可以包裹一个异步函数，在异步函数完成时抛出完成状态，让代码结束远古时无限回掉的窘境。配合async/await语法糖，可...

宇宙厂:为什么前端离不开 Promise.withResolvers() ?

大家好，很高兴又见面了，我是"高级前端进阶"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发。1.为什么需要Promise.with...

Promise 新增了一个超实用的 API!

在JavaScript的世界里，Promise一直是处理异步操作的神器。而现在，随着ES2025的发布，Promise又迎来了一个超实用的新成员——Promise.try()！这个新方法简...

一次搞懂 Promise 异步处理（promise 异步顺序执行）

PromisePromise就像这个词的表面意识一样，表示一种承诺、许诺，会在后面给出一个结果，成功或者失败。现在已经成为了主流的异步编程的操作方式，写进了标准里面。状态Promise有且仅有...

Promise 核心机制详解（promise机制的实现原理）

一、Promise的核心状态机Promise本质上是一个状态机，其行为由内部状态严格管控。每个Promise实例在创建时处于Pending（等待）状态，此时异步操作尚未完成。当异步操作成功...

javascript——Promise（js实现promise）

1.PromiseES6开始支持，Promise对象用于一个异步操作的最终完成（包括成功和失败）及结果值的表示。简单说就是处理异步请求的。之所以叫Promise，就是我承诺，如果成功则怎么处理，失败怎...

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

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