CSS差缺补漏之《高频面试题----如何使元素水平垂直居中?》

面试中经常会被问到如何使元素水平垂直居中,有哪些方法可以做到?

针对此问题,特意总结如下~

方法一: 定位(主要是值子绝父相)与margin负值配合----依赖于子元素宽/高

(使用绝对定位或固定定位后,所有元素,不管是行内元素还是行内块元素、块状元素,都可以定义宽高)

该方法适合子元素宽/高已知的情况~

<div class="box"><span class="box1"></span>
</div>
.box {width: 200px;height: 200px;background-color: rgb(220, 230, 245);/* 父相 */position: relative;
}.box1 {width: 100px;height: 100px;background-color: yellow;position: absolute;/* 定位距离上面50% */top: 50%; /* 定位距离左侧50% */left: 50%;/* 定位在往下退自身高度的50%,即100*50% = 50px */margin-top: -50px;/* 定位在往左退自身高度的50%,即100*50% = 50px */margin-left: -50px;
}

 

方法二: 定位(主要是值子绝父相)与变换负值配合----不依赖于子元素宽/高

(使用绝对定位或固定定位后,所有元素,不管是行内元素还是行内块元素、块状元素,都可以定义宽高)

该方法在子元素宽/高已知或未知的情况下都适合~

<div class="box"><span class="box1">很好很好很好很好很好很好很好很好很好很好</span>
</div>
.box {width: 200px;height: 200px;background-color: rgb(220, 230, 245);position: relative;
}.box1 {background-color: yellow;position: absolute;top: 50%;left: 50%;/* box1左移自身宽度的50% 上移自身高度的50% */transform: translateX(-50%) translateY(-50%);
}

 

方法三:定位与margin: auto配合

该方法适合于子元素宽/高已知的情况~

.box {width: 200px;height: 200px;background-color: rgb(220, 230, 245);/* 父相 */position: relative;
}
.box1 {width: 100px;height: 100px;background-color: yellow;position: absolute;/* 以下都不可缺省 */left: 0;top: 0;right: 0;bottom: 0;margin: auto;
}

  

 方法四:利用flex布局

(使用flex布局后,所有元素,不管是行内元素还是行内块元素、块状元素,都可以定义宽高)

该方法适合于宽/高已知/未知的情况~

<div class="box"><span class="box1"></span>
</div>
.box {width: 200px;height: 200px;background-color: rgb(220, 230, 245);display: flex;/* 设置主轴方向居中 */justify-content: center;/* 设置侧轴方向居中 */align-items: center;
}.box1 {width: 100px;height: 100px;background-color: yellow;
}

方法五: 针对行内元素的居中对齐方法

单行文本(给父元素加上):

        水平居中: text-align: center

        垂直居中: height = line-height

<div class="box"><span class="box1">很好</span>
</div>
.box {width: 200px;height: 200px;line-height: 200px;background-color: rgb(220, 230, 245);text-align: center;
}.box1 {background-color: yellow;
}

方法六: 针对行内元素的居中对齐方法

多行文本:

       display: table(给父元素加上)

       display: table-cell(给子元素加上)

       vertical-align: middle(给子元素加上)

       text-aline: center(给子元素加上)

.box {width: 200px;height: 200px;background-color: rgb(220, 230, 245);display: table;
}
.box1 {display: table-cell;vertical-align: middle;text-align: center;
}

方法七: 针对行内元素的居中对齐方法

多行文本:

       display: grid(给父元素加上)

       margin: auto(给子元素加上)

       text-aline: center(给子元素加上)

.box {width: 200px;height: 200px;background-color: rgb(220, 230, 245);display: grid;
}
.box1 {background-color: yellow;margin: auto;text-align: center;
}

 

 以上就是垂直居中布局的所有方案~点赞收藏哦~

​​​​​​​

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/2256.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【C/C++】深拷贝与浅拷贝

创作不易&#xff0c;本篇文章如果帮助到了你&#xff0c;还请点赞 关注支持一下♡>&#x16966;<)!! 主页专栏有更多知识&#xff0c;如有疑问欢迎大家指正讨论&#xff0c;共同进步&#xff01; &#x1f525;c系列专栏&#xff1a;C/C零基础到精通 &#x1f525; 给大…

探索图像处理的利器——OpenCV

目录 引言&#xff1a; 一、OpenCV简介&#xff1a; 二、OpenCV的特点&#xff1a; 三、OpenCV的应用领域&#xff1a; 四、实际案例&#xff1a; 结论&#xff1a; 引言&#xff1a; 在当今信息化的时代&#xff0c;图像处理已经成为了日常生活中不可或缺的一部分。从社…

sql读取数据直接存成pandas

导包 import pymysql import pandas as pd获取mysql链接 def get_db():#打开数据库连接db pymysql.connect(host*.*.*.*,port3306,user "wws",passwd "yourpasswd",db "youdb")return db db get_db()写sql 读数据保存 sql "select…

2.3、Bean的管理

一、Bean的装配&#xff08;IOC应用实现&#xff09; 创建应用组件之间的协作的行为通常称为装配&#xff08;wiring&#xff09;。Spring IOC通过应用上下文&#xff08;ApplicationContext&#xff09;装载Bean的定义并把他们组装起来。 Spring应用上下文&#xff08;Applica…

windows服务器自带IIS搭建网站并发布公网访问【内网穿透】

文章目录 1.前言2.Windows网页设置2.1 Windows IIS功能设置2.2 IIS网页访问测试 3. Cpolar内网穿透3.1 下载安装Cpolar3.2 Cpolar云端设置3.3 Cpolar本地设置 4.公网访问测试5.结语 转载自远程源码文章&#xff1a;【IIS搭建网站】本地电脑做服务器搭建web站点并公网访问「内网…

面试常问 什么是回表?为什么需要回表?

小伙伴们在面试的时候&#xff0c;有一个特别常见的问题&#xff0c;那就是数据库的回表。什么是回表&#xff1f;为什么需要回表&#xff1f; 索引结构 要搞明白这个问题&#xff0c;需要大家首先明白 MySQL 中索引存储的数据结构。这个其实很多小伙伴可能也都听说过&#xf…

iOS多语言解决方案全面指南

本文以及相关工具和代码旨在为已上线的iOS项目提供一种快速支持多语言的解决方案。由于文案显示是通过hook实现的&#xff0c;因此对App的性能有一定影响&#xff1b;除了特殊场景的文案显示需要手动支持外&#xff0c;其他任务均已实现自动化。 本文中的部分脚本代码基于 Chat…

第三方医药数据供应商有哪些?--数据业务介绍

第三方医药数据供应商主要是为医药企业、健康机构、学术研究、药物研发等提供医药相关数据的收集、整理、分析和应用服务。随着医药市场的需求衍生了许多各高垂直领域的医药数据供应商&#xff0c;这也导致了大家对医药数据供应商涉及领域认识的片面性。 故本文重点介绍各医药…

用API Key保护Spring Boot 接口的安全

1、概述 安全性在REST API开发中扮演着重要的角色。一个不安全的REST API可以直接访问到后台系统中的敏感数据。因此&#xff0c;企业组织需要关注API安全性。 Spring Security 提供了各种机制来保护我们的 REST API。其中之一是 API 密钥。API 密钥是客户端在调用 API 调用时提…

HDFS之Java客户端操作

HDFS之Java客户端操作 文章目录 HDFS之Java客户端操作写在前面准备Windows关于Hadoop的开发环境下载依赖配置HADOOP_HOME环境变量配置Path环境变量 创建Maven工程XML文件创建新的Package创建HdfsClient类执行程序 HDFS的API操作 写在前面 Hadoop版本&#xff1a;Hadoop-3.1.3L…

Redis实战——短信登录(二)

Redis代替session redis中设计key 在使用session时&#xff0c;每个用户都会有自己的session&#xff0c;这样虽然验证码的键都是“code”&#xff0c;但是相互不影响&#xff0c;从而确保每个用户获取到的验证码只能够自己使用&#xff0c;当使用redis时&#xff0c;redis的ke…

【永久服务器】EUserv

1. 请先自行准备网络&#xff08;我用的伦敦还可以&#xff09;、以及visa卡&#xff0c;淘宝可以代付&#xff0c;我总共花了97人民币&#xff08;10.94欧代付费&#xff09; 现在只能申请一台&#xff0c;多了会被删除&#xff0c;也就是两欧元&#xff0c;然后选择visa卡 选…