CSS 中如何垂直居中对齐
在 CSS 中实现水平居中对齐非常简单，但是垂直居中对齐却有一定难度。今天我们来学习如何实现垂直居中对齐。
常用的方式有三种：
1.使用 table-cell
这种方式使用 table-cell
属性，将需要垂直对齐的元素包裹在
一个 table 元素中，然后设置 table-cell 为
display 值，再使用 vertical-align
属性来控制垂直对齐。
例如，我们将
一个 div 容器用 table 包裹起来：
pre {
display: block;
background-color: #f5f5f5;
font-family: Consolas,Monaco,'An
Dale Mono',monospace;
padding: 10px;
border: 1px solid #ccc;
overflow: auto;
margin: 10px 0;
}
div {
width: 200px;
height: 200px;
display: table-cell;
vertical-align: middle;
text-align: center;
border: 1px solid #777;
}
2.使用 transform
这种方式使用 transform
属性，将需要垂直对齐的元素设置为绝对定位，然后使用 translateY
属性和 transform: translate(-50%,-50%) 来实现垂直居中对齐。
例如，我们将
一个 p 元素设置为绝对定位并使用 transform:
Hello,world!
3.使用 flex
Box
这种方式使用 flex
Box，将需要垂直对齐的元素包裹在
一个 flex 容器中，然后使用 justify-content 和 align-items
属性来控制水平和垂直居中对齐。
例如，我们将
一个 div 元素设置为 flex 容器并使用 align-items 和 justify-content:
以上就是三种实现垂直居中对齐的方式，可以根据实际需要选择不同的方式来实现。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。
