1.单行文本是通过设置父元素的 height 和 line-height 高度一致来完成的,其中height是指元素的高度, line-height 是指行间距。
写一个我是单行文本,我想垂直居中
写三个
我是多行文本1,我想垂直居中
我是多行文本2,我想垂直居中
我是多行文本3,我想垂直居中
要实现页面内容的垂直居中,可以通过以下几种方法进行设置:1. 使用CSS的flex布局: ```css body { display: flex; justify-content: center; /* 水平居中 */ align-items: center; /* 垂直居中 */ height: 100vh; /* 设置body高度为视口高度 */ } ```2. 使用绝对定位和transform属性: ```css body { position: relative; height: 100vh; /* 设置body高度为视口高度 */ } .centered { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } ```3. 使用table布局: ```css body { display: table; width: 100%; height: 100vh; /* 设置body高度为视口高度 */ } .centered { display: table-cell; vertical-align: middle; text-align: center; /* 水平居中 */ } ```无论哪种方法,都需要保证父容器元素(通常是`body`)的高度和宽度符合要求,可以使用`height: 100vh;`来设置高度为视口高度。然后,通过设置子元素的属性,如`display: flex;`、或使用绝对定位等方式,将内容垂直居中显示。
我是单行文本,我想垂直居中<...">