html – CSS：垂直对齐

概述如何在不使用显示表/表格单元格或绝对位置的情况下进行垂直对齐？ #parent { border: 1px solid red; height: 100vh;}.child { border: 1px solid blue;} <div id="parent"> <div class="child"> <p>I want to be vertical aligned 如何在不使用显示表/表格单元格或绝对位置的情况下进行垂直对齐？

#parent {  border: 1px solID red;  height: 100vh;}.child {  border: 1px solID blue;}

<div ID="parent">  <div >    <p>I want to be vertical aligned</p>  </div></div>

解决方法 这是使用“Flex”属性的另一个选项.

<div ID="parent">  <div >    <p>I want to be vertical aligned</p>  </div></div>#parent {  border: 1px solID red;  display: flex;  align-items: center;  height: 100vh;}.child {  border: 1px solID blue;  flex-grow: 1;}

Codepen demo link

总结

以上是内存溢出为你收集整理的html – CSS：垂直对齐全部内容，希望文章能够帮你解决html – CSS：垂直对齐所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。