您现在的位置是：网站首页> 编程资料编程资料

DIV+CSS垂直居中一个浮动元素CSS实现子元素div水平垂直居中的示例css常用元素水平垂直居中方案css实现元素垂直居中的常用方法(总结)利用css设置元素垂直居中的解决方法汇总css实现元素水平垂直居中常见的两种方式实例详解css3设置box-pack和box-align让div里面的元素垂直居中html元素水平居中、垂直居中、水平垂直居中于其父级元素的方法网页布局 CSS简单实现垂直居中-CSS教程-网页制作-网页教学网css实现元素垂直居中显示的7种方式

2021-09-06 938人已围观

简介对于页面上的块级元素，只须定宽及设置margin:auto 0;即可在垂直上居中，但对于浮动的元素垂直居中是无效的。那么我们如何来处理这个问题呢，今天我们来探讨下。

场景：在一个固定高度的div中，有一个浮动的元素，需要将这个浮动元素垂直居中。

原始代码如下:

复制代码

代码如下:

现在只是简单的设置这个button浮动，实现的效果看起来就像这样：

现在需要将这个button在整个div里垂直居中。我的做法是在这个button外层加一个span，并且浮动这个span元素而不是之前的button。另外需要设置这个span的高和行高与外层div相同。


复制代码
代码如下:

span{
 float: right;
 height: 300px;
 line-height: 300px;
}

现在应该就变成这样了：

完整代码：

复制代码

代码如下: