h5文字垂直居中

您所在的位置：网站首页 › cad里面的文字怎么水平垂直居中 › h5文字垂直居中

h5文字垂直居中

2023-09-11 01:54| 来源: 网络整理| 查看: 265

flex垂直居中：

第一种：使用flex布局，让居中元素的父元素为flex属性,让它在交叉轴上center就可以达到居中效果了：

html代码:

我要垂直居中

css代码: .father { display:flex; align-items: center; background:grey; height:100vh; }

flex水平垂直居中:

html代码:

我要垂直居中

css代码: .father { display:flex; align-items: center; //交叉轴 justify-content:center; //主线 background:grey; height:100vh; }

第二种：使用position + transform，实现垂直居中：

.father { background:grey; height:100vh; position: relative; } p{ position: absolute; top:50%; //50%并不是居中的，因为它是以元素的上border为标准移动50%的 transform:translateY(-50%) //所以我们需要像上移动元素自身高度一半儿的距离 }

使用position + transform，实现水平垂直居中：

.father { background:grey; height:100vh; position: relative; } p{ position: absolute; left:50%; top:50%; transform:translate(-50%,-50%) }

【本文地址】

h5文字垂直居中

h5文字垂直居中

今日新闻

推荐新闻