css两种垂直居中对齐解决方案

elarity 发布于2019-08-02 16:15 / 977人阅读

第一种垂直居中方法

利用vertical-align：middle进行垂直方向上的居中对齐，此方法需要满足的条件：

设置父元素的行高line-height等于父元素height的高度

子元素必须是行内块级元素display:inline-block;

子元素设置vertical-align：middle

此方法在开发中不能右浮动(不能靠右边)

下方是完整代码，可以新建一个HTML文件进行测试(绿色的盒子)：



导航条







xxxxxxxxxxx

第一种方法结束。

第二种垂直居中方法

这种方法比较暴力，利用定位解决：

父元素开启相对定位

子元素绝对定位

子元素先向下移动父元素的50%，此时子元素的顶部与父元素的中线对齐了

子元素再向上移动自身高度"height"的一半，此时子元素的中线和父元素的中线对齐了

此方法可以右对齐，设置子元素right：0px;即可

下方是完整代码，可以新建一个HTML文件进行测试(绿色的盒子)：



导航条

第二种方法结束。

总结

上面两种方法的特点都是让子元素的中线和父元素的中线对齐。

GPU云服务器云服务器垂直居中实现垂直居中水平垂直居中文字垂直居中

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/54952.html

css两种垂直居中对齐解决方案

第一种垂直居中方法利用vertical-align：middle进行垂直方向上的居中对齐，此方法需要满足的条件：设置父元素的行高line-height等于父元素height的高度子元素必须是行内块级元素display:inline-block; 子元素设置vertical-align：middle 此方法在开发中不能右浮动(不能靠右边) 下方是完整代码，可以新建一个HTML文件进行测...

ztyzz 2019-08-29 18:46 评论0 收藏0
不定元素宽高用css实现内容水平和垂直都居中

摘要：在开发中经常遇到这个问题，即让某个元素的内容在水平和垂直方向上都居中，内容不仅限于文字，可能是图片或其他元素。这篇文章就来总结一下都有哪些方法可以实现水平和垂直都居中。表示这些元素将相对于本容器水平居中，也是同样的道理垂直居中。在开发中经常遇到这个问题，即让某个元素的内容在水平和垂直方向上都居中，内容不仅限于文字，可能是图片或其他元素。而且我们希望不要涉及宽度和高度，也就是说，我们不...

Chao 2019-08-30 15:52 评论0 收藏0
css布局基础总结

摘要：想写出高效合理的布局，必须以深厚的基础为前提。现在布局方式主要分为三种传统布局方案等配合。弹性布局，实现方便，兼容性较好。在环境中的元素按照如下规则渲染和文档流一样，元素按照自己类型的布局特性从左到右，从上往下依次排列。前端css布局知识繁杂，实现方式多种多样。想写出高效、合理的布局，必须以深厚的css基础为前提。为了方便记忆和复习，将css布局要点记录如下。内容较多，应用方面说的不...

PrototypeZ 2019-08-30 15:54 评论0 收藏0