网页元素水平且垂直居中的实现方式

🤍 前端开发工程师、技术日更博主、已过CET6
🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1
🕠牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》、《前端求职突破计划》
🍚蓝桥云课签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

文章目录

• • • 使用CSS的`display: flex`
    • 使用CSS的`display: grid`
    • 使用绝对定位和负边距
    • 使用绝对定位和`transform`
    • 使用`table - cell`布局

在网页设计中，使元素在页面中水平且垂直居中是一个常见的需求。以下是几种实现水平且垂直居中的方式：

使用CSS的display: flex

• 原理：通过将父元素设置为display: flex，开启弹性布局，然后使用justify-content和align-items属性来分别控制子元素在水平和垂直方向上的对齐方式。
• 代码示例

.parent{display:flex;justify-content:center;align-items:center;height:100vh;/* 假设父元素占满整个视口高度 */}.child{width:200px;height:100px;background-color:lightblue;}

使用CSS的display: grid

• 原理：利用网格布局，将父元素设置为display: grid，然后通过place-items属性一次性设置子元素在水平和垂直方向上的对齐方式。
• 代码示例

.parent{display:grid;place-items:center;height:100vh;}.child{width:200px;height:100px;background-color:lightgreen;}

使用绝对定位和负边距

• 原理：先将子元素设置为绝对定位，然后通过top和left属性将其定位到父元素的中心位置，再使用负边距来调整子元素的位置，使其水平和垂直居中。
• 代码示例

.parent{position:relative;height:100vh;}.child{position:absolute;top:50%;left:50%;width:200px;height:100px;margin-top:-50px;/* 负的高度一半 */margin -left:-100px;/* 负的宽度一半 */background -color:pink;}

使用绝对定位和transform

• 原理：同样先将子元素绝对定位，然后利用transform属性的translate方法来将子元素在水平和垂直方向上移动自身宽度和高度的一半，实现居中效果。
• 代码示例

.parent{position:relative;height:100vh;}.child{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:200px;height:100px;background-color:orange;}

使用table - cell布局

• 原理：将父元素设置为display: table - cell，并设置vertical - align: middle来实现垂直居中，再结合text - align: center使子元素在水平方向上居中。
• 代码示例

.parent{display:table - cell;vertical -align:middle;text -align:center;height:100vh;width:100%;}.child{display:inline - block;width:200px;height:100px;background -color:purple;}

以上是几种常见的实现网页元素水平且垂直居中的方式，每种方式都有其特点和适用场景。在实际应用中，可以根据具体的布局需求和项目特点选择合适的方法。