欢迎访文我的博客YangChen’s Blog
水平居中和垂直居中可以说是开发中经常遇到的问题,网上搜索水平居中和垂直居中后会有很多方法,有的方法并不是很好,所以结合自己的开发经验,总结下几个个人常用的水平居中和垂直居中方法。
水平居中
行内元素或类行内元素水平居中
块级父元素当中让行内子元素居中,只需要text-align:center
即可,对一些类行内元素,如inline
、inline-block
等同样适用。
一种常用的处理分页标签居中的方式就是给子元素设置display:inline-block
它的父元素设置成text-align:center
块元素水平居中
块元素水平居中常用的方法就是设置固定宽度,margin值设为auto即
.wrap {
width:1000px;
margin: 0 auto;
}
此方式缺点就是宽度是固定的,不能自由伸缩
浮动元素水平居中
是的浮动元素宽度自适应的水平居中,此方法来自Matthew James Taylor写的《Horizontally Centered Menus with no CSS hacks》一文,并且引用其文中演示的示意图。
先从原理讲起最后在贴代码吧
以分页为例,按照传统方法,li标签左浮动且ul左浮动后就会如下图所示
首先为centeredmenu这个div里设置上position:relative
,然后再让ul向右移动50%,即left:50%
,这样就能看到以下效果,整个分页向右移动了50%
紧接着为li标签定义上position:relative
属性,让其移动方向相反,向左移动50%,即right:50%
,这样就能看到如下效果,分页就水平居中啦
这个方法兼容性强,而且没有固定宽度的设置,拓展性也强实例代码如下:
#centeredmenu {
float:left;
width:100%;
overflow:hidden;
position:relative;
}
#centeredmenu ul {
clear:left;
float:left;
list-style:none;
position:relative;
left:50%;
text-align:center;
}
#centeredmenu ul li {
display:block;
float:left;
position:relative;
right:50%;
}
垂直居中
下面是垂直居中的几种方法
行内元素的垂直居中
这个方法很常见,对于一个单行文本的垂直居中,只要将line-height设置为元素高度即可,使用时注意浏览器hack,这个方法的局限就是只能是单行文本的
对于多行文本就要借助display:table
了,因为用table做表格时,他的每一行都是垂直居中的,所以就借助这个来实现。示例代码如下
.center-table {
display: table;
height: 250px;
}
.center-table p {
display: table-cell;
vertical-align: middle;
}
块级元素垂直居中
子元素知道具体宽高的
.wrap {
//父元素
}
第一个方法
.wrap .content {
position: absolute;
width: 100px;
heigth: 100px;
top: 50%;
margin-top: -50px; //为高度的一半
}
这个方法就是设置top:50%
后,这个块元素的最上边为垂直居中的位置,但是这样整体的内容并不是垂直居中,所以要设置margin-top: -50px; //为高度的一半
,这样这个块元素又相对于自身最上面向上又移动了自身的50%,因此就垂直居中了。
第二个方法
.wrap {
position: relative;
}
.wrap .content {
position: absolute;
heigth: 100px;
margin: 0;
bottom: 0;
margin: auto;
}
子元素不知道具体宽高的
这种情况有三种方法
第一种借助table布局,与上面介绍的多行垂直居中方法一样。
第二种是借助translate
的transform
属性,示例如下:
.wrap {
position: relative;
}
.wrap .content {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
这个方法与上面那个固定宽度垂直居中的思想可是一样的啊,有没有看出来?
第三种就是用flex布局,非常的简单,代码如下:
.wrap{
display: flex;
flex-direction: column;
justify-content: center;
}
至于选择哪种方法好看情况吧,因为没有一种方法是万能,总有着各自的不足,也有着各自的优势。