文本内容居中
单行文字 : line-height + text-align:center or margin:0 auto
.div1 {
width:500px;
height:25px;
border:5px solid #d8d8d8;
text-align:center; /*子元素水平居中*/
line-height:25px; /*设置line-height,和高相等,即可垂直居中*/
overflow:hidden; /*后面使用overflow:hidden的设置是为了防止内容超出容器或者产生自动换行,这样就达不到垂直居中效果了。*/
}
.span1{
/*
width:100px;
display: block;
margin:0 auto;
*/
/*
这几个属性组合使用可以达到水平居中的效果,但要使margin:0 auto生效要满足以下条件
块级元素(display:block or display:table)
非浮动元素
非固定或绝对定位元素
宽度不能是auto
*/
}
单行文字已知宽高居中;
多行文字:display:table + display:table-cell + vertical-align:middle
IE 6 不能正确地理解display:table和display:table-cell,因此这种方法在IE6及以下的版本中是无效的。
处理多行文字的诀窍是用标签包起来当做一个元素(如span)来做水平垂直居中处理,这样水平垂直居中的方法都可以应用在这里。
.div2{
display:table-cell;
width:500px;
height:auto;
padding:0 0.1em;
border:4px solid #d8d8d8;
color:#069;
vertical-align:middle; /*CSS 的属性 vertical-align 用来指定行内元素(inline)或表格单元格(table-cell)元素的垂直对齐方式。*/
}
.span2{
display:inline-block;
width:100%;
height:50%;
font-size:1em;
overflow-y:auto;
}
.div2-1{
display:table;
width:500px;
height:500px;
padding:0 0.1em;
border:4px solid #d8d8d8;
color:#069;
}
.span2-1{
display:table-cell;
font-size:1em;
vertical-align:middle;
}
2;多行文字已知宽高垂直居中;多行文字已知宽高垂直居中;多行文字已知宽高垂直居中;多行文字已知宽高垂直居中;多行文字已知宽高垂直居中;多行文字已知宽高垂直居中;多行文字已知宽高垂直居中;多行文字已知宽高垂直居中;
2-1;多行文字已知宽高垂直居中;多行文字已知宽高垂直居中;多行文字已知宽高垂直居中;多行文字已知宽高垂直居中;多行文字已知宽高垂直居中;多行文字已知宽高垂直居中;多行文字已知宽高垂直居中;
其实文字居中最简单的方法就是设定Padding,使上下或左右的padding值相同即可。这是一种“看起来”的垂直居中方式,它使文字完全填充
。
position + 负margin方法
该方法兼容 IE6 - IE7,但是要已知元素宽高,不支持百分比尺寸和 min-/max- 属性。
.div5{
position:relative;
height:50%;
width:50%;
border:4px solid #d8d8d8;
}
.span5{
width:50px;
height:50px;
border:4px solid #d8d8d8;
position:absolute;
top:50%;
left:50%;
margin-top:-25px;
margin-left:-25px;
}
position top margin 负边距定位
position+ transform方法
这种方法原理和负边距方法一样,不过不用确定居中元素的宽高,但也有一些坑, 可能干扰其他 transform 效果,如有其他transform需要合写,不利于解耦。
其次, 使用transform可能导致元素内字体出现模糊,主要是因为使用了transform 3D变换,3D变换会开启GPU加速,GPU加速动画时,并不是把原生DOM传递给GPU,它生成一个元素图像,把该图像发送到GPU,GPU将图像应用为多边形纹理贴图代表元素,GPU可以流畅快速的对这些多边形进行旋转,缩放,转换,倾斜等变换,但由于只是传递元素图像到GPU进行处理,所以它并不能重新渲染内容,图像清晰度不能保证,元素显示清晰度自然就下降了。(后来用了别的居中方法。。)
.div3{
position:relative;
height:50%;
width:50%;
border:4px solid #d8d8d8;
}
.span3{
width:50px;
height:50px;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
/*
transform:translateY(-50%);
transform:translateX(-50%);
*/
border:4px solid #d8d8d8;
}
transform
绝对居中定位方法
元素的宽高支持百分比 % 属性值和 min-/max- 属性
.div6{
position:relative;
height:100%;
width:100%;
border:4px solid #d8d8d8;
}
.span6{
width:50%;
height:50%;
border:4px solid #d8d8d8;
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
margin: auto auto;
}
position top bottom margin 绝对居中定位
flexbox 布局
子元素为浮动,绝对定位,内联元素,都可以实现居中,但要ie11+才支持,可以用babel来polyfill
.div4{
display:flex;
height:50%;
width:50%;
border:4px solid #d8d8d8;
align-items:center;
justify-content:center;
}
.span4{
width:50px;
height:50px;
border:4px solid #d8d8d8;
}
flex
box布局
.div8{
width:50%;
height:50%;
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;
border:4px solid #d8d8d8;
}
.span8{
width:50px;
height:50px;
border:4px solid #d8d8d8;
}
display:-webkit-box
:before伪元素方法
该方法是利用vertical-align的基线原理,假设有两个行内元素a和b,a和b都是img,当a加了一个vertical-align:middle样式之后,b的底部(基线)就会对齐a的中间位置, 如果a和b都加了一个vertical-align:middle样式,那么就互相对齐了对方的中间位置,也就是它们在垂直方向上的中线对齐了
.div9{
/* position:fixed;
display:block;
top:0;
right:0;
bottom:0;
left:0; */
width:50%;
height:50%;
text-align:center;
border:4px solid #d8d8d8;
/*background:rgba(0,0,0,.5);*/
}
.div9:before{
content:'';
display:inline-block;
vertical-align:middle;
height:100%;
}
.div9 .span9{
display:inline-block;
vertical-align:middle;
width:50px;
height:50px;
line-height:50px;
border:4px solid #d8d8d8;
}
:before
table-cell + vertical-align居中
这个已经在多行文字例子做了介绍
附录
注1:
CSS 的属性 vertical-align 用来指定行内元素(inline)或表格单元格(table-cell)元素的垂直对齐方式。常见用法:
... ...
...
注2:若要兼容ie6+的浏览器,可能需要css hack
div#wrap {
display:table;
border:4px solid #d8d8d8;
width:500px;
height:400px;
_position:relative;
overflow:hidden;
text-align:center;
}
div#subwrap {
vertical-align:middle;
display:table-cell;
_position:absolute;
_top:50%;
}
div#content {
_position:relative;
_top:-50%;
}
组和两种居中方案 css hack