使用CSS实现垂直居中的常用方法
尽管CSS已经成为前端开发的基础知识，但实现垂直居中还是让很多开发人员头疼。以下是一些常用的CSS方法，希望可以帮助你更好的实现垂直居中。
方法一：使用flex弹性布局
给父盒子设置 display:flex 属性，子盒子使用 align-items 和 align-content 的属性，就可以做到垂直居中的效果。如图：
方法二：使用定位position和外边距margin
使用定位position，绝对定位absolute，相对定位relative，外边距margin，可以达到垂直居中的效果。如图：
方法三：使用定位position和transform
使用定位position和CSS3的transform属性，可以利用transform里头的translate，x轴，y轴百分比偏移，配合position定位top，left属性，做出垂直居中的效果。注：子元素必须要加上position:relative，不然没有效果。如图：
方法四：设定行高line-height
对于行内元素（inline、inline-block），例如单行的标题，或display:inline-block属性的div，将line-height设成和height一样的值，则内容的行内元素就会被垂直居中。如图：
希望以上常用的CSS垂直居中方法能够帮助开发人员解决问题，提高网页布局效果。
原创文章，作者：小编小本本，如若转载，请注明出处：https://www.benjiyun.com/yunzhujiyunwei/vps-yunwei/6533.html
相关推荐
-
基于Python实现GeoServer矢量文件批量发布
Python实现GeoServer矢量文件的批量发布 我是本际云服务器推荐网的小编小本本，今天给大家详细介绍一下Python实现GeoServer矢量文件的批量发布。 操作步骤 由…
-
Redis究竟是何物：数据库还是缓存？
Redis 是一个高性能的键值存储系统，可以用作数据库、缓存和消息中间件。然而，当人们谈论 Redis 时，常常会发现争议：Redis究竟是数据库还是缓存？ 部分人认为 Redis…
-
Mongodb数据生命周期管理的三种方式
三种Mongodb数据清理方案 在数据库的日常运维和性能优化中，数据库表数据的生命周期管理是一个常见且重要的工作场景。Mongodb的数据生命周期管理可利用自身的功能特性实现，下面…
-
记11.2.0.3版本远程投毒修复方案
你好，欢迎来到本际云服务器推荐网，我是小编小本本！ 概述及分析 针对一套x86系统上运行的11.2.3版本数据库，发现Oracle远程监听投毒漏洞，并参考CVE-2012-1675…
-
XSS攻击实践
前言 由于浏览器同源策略，限制了页面无法引用第三方资源，无法请求不同源下面的资源，影响了web的发展，所以浏览器出让了一些安全策略来满足web的发展。通过CSP安全策略来保证浏览器…
-
解析python二维动画、二维动画目录的复位难题
Python二维动画的目录复位 本文将详细介绍Python二维动画、二维动画目录的复位。这篇文章根据两种形式来给大家详细的讲解，对大家学习培训和工作具有很强的参照参考实际价值，相信…
-
PostgreSQL恢复误删除数据
PostgreSQL误删数据恢复指南 我是本际云服务器推荐网的小编小本本，今天和大家分享一下误删数据恢复的方法。事故发生在早上，业务人员不小心删除了某张表的数据。对于这种情况，通常…
-
vROPs集成监控方案
需求 某行业公司平台需要新的采集服务来解决现有产品获取资源实例指标不够精细，数据不准确等问题，需求如下： 根据vROPs平台提供的接口服务，完成虚拟机及宿主机更高精度的数据获取。 …
-
香港服务器怎么选
选购香港云服务器的稳定性评估 作为一个云服务器用户，您肯定会非常重视服务器的稳定性。香港的云服务器通常因其良好的网络连接和较低的延迟而受到欢迎，它们也通常具有更高的隐私保护和数据安…
-
Python获取线程返回值的三种方式分别是什么？下文给大家解答
如何利用Python获取线程返回值？ 作为本际云服务器推荐网的小编小本本，我会在这篇文章中给大家解答如何获取线程返回值的问题。同时，我会详细介绍三种不同的方法，帮助大家更好地掌握这…