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

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

第一种垂直居中方法

利用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