css3 设置div垂直居中

CSS3是现代网页设计中非常常用的一种样式语言，它具有众多的特性，其中之一就是可以让我们的Div元素垂直居中。下面我们一起看看如何实现这一效果。

// 设置父元素为flex布局.parent {
    display: flex;
    align-items: center;
 // 将子元素垂直居中}
// 设置子元素为绝对定位元素.child {
    position: absolute;
    top: 50%;
     // 将元素上移50%transform: translateY(-50%);
 // 再将元素自身向上移动50%}
// 或者使用以下方法.child {
    position: absolute;
    top: 0;
    bottom: 0;
     // 让元素占满整个父元素margin: auto;
 // 设置上下间距为自动，即自动居中}
    

以上就是两种常用的方法实现Div元素的垂直居中了，当然还有其他的实现方法，不同的情况下选择不同的实现方式。希望这篇文章对于学习CSS3垂直居中有所帮助。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！