CSS水平居中和垂直居中的若干方法

hiyayiji 发布于2019-08-29 12:29 / 2816人阅读

摘要：居中分为水平居中和垂直居中，水平居中方式也较为常见和统一，垂直居中的方法就千奇百怪了。若把最后一行加上，即可同时实现水平和垂直居中。

博客原文地址：Claiyre的个人博客 https://claiyre.github.io/
如需转载，请在文章开头注明原文地址
不为繁华易匠心

从css入门就开始接触，无所不在的，一直备受争议的居中问题。
css居中分为水平居中和垂直居中，水平居中方式也较为常见和统一，垂直居中的方法就千奇百怪了。本文是我积累的若干css居中的方法，先后讨论了块级元素的和行内元素的垂直居中和水平居中，特此记录下来与大家分享。如有叙述不当的地方，还望指出。o(￣▽￣)ブ

本文以下代码中 .outer是父元素的类名，.inner块级代表子元素,span代表行内子元素。

水平居中 1. 行内元素的水平居中

直接设置其父元素

.ourter{
text-align: center;
}

不管有几个行内元素，一行代码即可搞定，so easy~

2. 块级元素的水平居中

也非常简单呐
设置该块级元素

div{
margin: 0 auto;                                                  
}

但是！但是！如果该元素的position为absolute的话，该方法会失效。
我是这样理解的：margin为auto即相当于外边距的值是自动的，相对的，所以在绝对定位下将失效。不过还是可以将其margin设为具体数值滴。

垂直居中

有很多关于垂直居中tricks,博主在这里只介绍一些比较简单常用的
如果对高度没有要求的哈

1. 行内元素的垂直居中

1）如果对父元素的高度没有具体的要求的话，将父元素的padding-top padding-bottom设置为相同的值即可。

.outer{
padding-top: 60px;
padidng-bottom: 60px;                                                       
width：300px;
height: auto; /*注意：此时父元素的height不能是具体数值*/
}

2）如果要求父元素的高度为具体数值时，且确保行内元素不会换行时，可以设置line-height等于父元素的高度

.outer{
width: 300px;
height: 200px;
line-height: 200px;                                                  
/*text-align: center; */                                    
}

此时，即可实现行内元素的垂直居中。若把最后一行加上，即可同时实现水平和垂直居中。
但是！！！一定要确保不会换行，也就是只有一行。
3）在保持父元素具体数值宽度不变且有不止一行时，可以使用一点小tricks,比如

.outer{
text-align: center;                                                              
height: 200px;
width: 300px;
}
.outer::before{
content: " ";
height: 100%;
width: 1%;
display: inline-block;
vertical-align: middle;
}
/*html代码如下*/

    span1
    span2

但是，注意：因为vertical-align是指行内元素的基线相对于该元素所在行的基线的垂直对齐方式，所以该方法只对行内元素有效
效果：

2. 块级元素的垂直居中

1）如果已知子元素的高度，可以这样

.outer{
position: relative;                                                       
}
.inner{
height：50px;
width:50px;
position: absolute;
top: 50%;
margin-top: -25px;  /*该元素高度的一半*/                                  
}

注意子元素和父元素的position，切记父元素的position是relative

2）如果不知道子元素的高度，可以利用css的transform属性，对1）进行小改动，如下：

.outer{
position: relative;                                                         
}
.inner{
width:50px;
position: absolute;
top: 50%;
transform: translateY(-50%);                                                    
}

3）但以上两种方式对于有多个块级子元素的情况就不适用了，比如，这样的情况

这时我们可以用一个div把所有子元素包裹起来，变成一个子元素，然后就可以继续使用上面的方法了。

最最后！上面的所有方法都是在不使用flex的前提下的才使用的！解决居中问题最爽的当然是flex布局啦，O(∩_∩)O~~
什么？！还不会使用flex布局？赶紧点下面~

flex布局学习总结
使用flex，管它是行内元素还是块级元素，管它有几个元素，统统搞定！
举个栗子！
实现多个块级元素的垂直加水平居中

.outer{
display: flex;
justify-content: center;                                                              
align-items: center;
flex: 0 0 auto;
/* flex-direction: column;  */
}

效果图如下:

如果加上最后一行，则竖直排列子元素，即：

是不是很简便腻~O(∩_∩)O哈！

云服务器 GPU云服务器水平垂直居中 html的水平居中垂直居中实现垂直居中

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

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

vertical-align属性与垂直居中

摘要：方法二利用，设置元素结构，并应用实现垂直居中，这种方法的实现可用于多行文本，要求及以上版本。让元素居中对齐是非常常见的需求，首先是水平居中，要实现水平居中行内元素只需要在其父元素上设置text-align: center即可，对于块级元素来说让它的margin-left: auto和margin-right: auto即可（width不可为auto），那么垂直居中呢？找下css属性发...

bergwhite 2019-08-28 18:11 评论0 收藏0
白浅教你CSS的垂直居中方法

showImg(https://segmentfault.com/img/bVJcnS?w=377&h=83); placeholder: 我是一个不正经的属性. ----题记说道页面垂直居中, 在大家的思维中, 很快就能有若干个(常用...

zengdongbao 2019-08-30 15:52 评论0 收藏0
CSS居中完全指南——构建CSS居中决策树

摘要：但是部分浏览器存在兼容性的问题。核心代码宽高不固定水平垂直居中演示使用布局垂直水平居中核心代码使用布局垂直水平居中演示使用布局垂直水平居中核心代码使用布局垂直水平居中演示 CSS居中完全指南——构建CSS居中决策树 showImg(https://segmentfault.com/img/bV8tDq); 本文总结CSS居中,包括水平居中和垂直居中.本文相当于CSS决策树,下次再遇到...

cc17 2019-08-02 10:11 评论0 收藏0
CSS居中完全指南——构建CSS居中决策树

摘要：但是部分浏览器存在兼容性的问题。核心代码宽高不固定水平垂直居中演示使用布局垂直水平居中核心代码使用布局垂直水平居中演示使用布局垂直水平居中核心代码使用布局垂直水平居中演示 CSS居中完全指南——构建CSS居中决策树 showImg(https://segmentfault.com/img/bV8tDq); 本文总结CSS居中,包括水平居中和垂直居中.本文相当于CSS决策树,下次再遇到...

AlienZHOU 2019-08-30 15:53 评论0 收藏0
CSS-水平居中、垂直居中、水平垂直居中

摘要：水平居中水平居中可分为行内元素水平居中和块级元素水平居中行内元素水平居中这里行内元素是指文本图像按钮超链接等，只需给父元素设置即可实现。 1、水平居中水平居中可分为行内元素水平居中和块级元素水平居中 1.1 行内元素水平居中这里行内元素是指文本text、图像img、按钮超链接等，只需给父元素设置text-align:center即可实现。 .center{ te...

scwang90 2019-08-30 14:19 评论0 收藏0