编程教育资源分享平台

网站首页 > 后端开发 正文

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

luoriw 2024-02-01 14:28:15 后端开发 14 ℃ 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的transformposition属性。这种方法在某些情况下可能比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>

初始

居中


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

Tags:

本文暂时没有评论,来添加一个吧(●'◡'●)

欢迎 发表评论:

最近发表
标签列表
最新留言