水平垂直居中方案
一、水平居中
1.1.行内元素水平居中
给父级元素设置text-align:center;
1.2.块状元素水平居中
给要居中的元素设置margin:o auto;
1.3.多个块状元素水平居中
将需要居中的元素设置为display:inline-block;将父级元素设置:text-align:center;
二、水平垂直居中
方法1: 绝对定位与负边距实现;
将父级元素定位设置为relative(作为子元素移动的参考物),给子元素的定位设置为absolute,给子元素设定top:50%,left:50%,然后用magrin边距,上左减去自身宽高的一般,实现垂 直居中。
方法2:绝对定位与margin
此方法可以不用知道被垂直居中元素的高度和宽度。
代码示例:.container{
position:relative;
}
.conter{
postion:absolute;
margin:auto;
top:0;bottom:0;left:0;right:0;
}
三、未知高度和宽度元素的水平垂直居中
当需要被居中元素是inline或inlin-block的时候,可以将父级容器设置为:display:table-cell,配合text-alig:center和vertical-align:middle,可以实现水平垂居中。