水平垂直居中方案

　一、水平居中

　　　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，可以实现水平垂居中。

 

转载于:https://www.cnblogs.com/yueliang--/p/9350201.html