使用flex布局和line

2023-07-23 02:18| 来源: 网络整理| 查看: 265

在前端开发中除了实现div居中之外，还经常需要让字体水平垂直居中，div实现水平垂直居中可以参考使用flex布局和translate实现div水平和垂直居中，文字的水平和垂直居中代码实现如下

.contain1{ width: 100%; height: 100%; } .contain1 > div{ position: absolute; width: 50%; height: 50%; } .div2{ right: 0; background: rgba(149,64,36,0.6); /*开启flex布局*/ display: flex; /*垂直居中*/ align-items: center; /*水平居中*/ justify-content: center; } .div3{ top: 50%; background: cyan; display: flex; align-items: center; justify-content: center; } .div33{ width: 200px; background: rgba(36,49,64,0.6); /*height+line-height控制字体垂直居中 * text-align控制字体水平居中*/ height: 200px; line-height: 200px; text-align: center; } 我是居中字体我是居中字体

效果如图：在这里插入图片描述

【本文地址】

公司简介

联系我们