css两端对齐(css实现上下左右居中)

　　css两端对齐

CSS完成两头对齐作用
CSS3新增的flex布局下，有一个justify-content特点，此特点能够操控弹性项目的水平对齐方法。其中有两个值，能够完成两头对齐。但是justify-content存在兼容性问题，IE10以上，FF，Chrome都支撑。而一切浏览器都支撑text-align特点
justify-content:space-around。弹性项目会均匀地散布在弹性容器内，两头保存一半的空间。
justify-content:space-between。弹性项目会均匀地散布在弹性容器内，第一个弹性项目在弹性容器的左边际，最终一个弹性项目在弹性容器的右边际。
justify-content:space-around;
justify-content:space-between;

css实现上下左右居中

1、absolute，margin:auto
.container{position:relative;
}.content{position:absolute;margin:auto;top:0;left:0;bottom:0;right:0;
}
留意:当没有指定内容块的具体的高度和宽度时，内容块会填满剩余空间。能够通过运用max-height来限制高度，也能够通过display:table来使高度由内容来决议，可是浏览器支撑不是很好。
2、relative，lefttop50%，负margin-leftmargin-top
.isNegative{position:relative;width:200px;height:300px;left:50%;top:50%;margin-left:-100px;margin-top:-150px;
}
缺陷:需求知道具体的高度和宽度
3、relative，lefttop50%，transform:translate(-50%,-50%)
.content{position:relative;left:50%;top:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);
}
这儿translate的百分比是相对于自身的，所以高度是可变的
4、Table-Cell
.Center-Container.is-Table{display:table;}.is-Table.Table-Cell{display:table-cell;vertical-align:middle;
}.is-Table.Center-Block{width:50%;margin:0auto;
}
留意:需求添加最内层的div，而且给div指定宽度和margin:0auto;来使div居中。
5、Inline-Block
html
css
.Center-Container.is-Inline{text-align:center;overflow:auto;
}.Center-Container.is-Inline:after,
.is-Inline.Center-Block{display:inline-block;vertical-align:middle;
}.Center-Container.is-Inline:after{content:”;height:100%;margin-left:-0.25em;/*Tooffsetspacing.Mayvarybyfont*/}.is-Inline.Center-Block{max-width:99%;/*Preventsissueswithlongcontentcausesthecontentblocktobepushedtothetop*//*max-calc(100%-0.25em)/*OnlyforIE9+*/}
空内容也会占据一定空间，需求margin-left:-0.25em;来抵消偏移
内容块的最大宽度不能是100%，否则会把::after的内容挤到下一行
6、Flex
html
//content
css
.container{display:flex;flex-direction:row;justify-content:center;align-items:center;
}
最便利最简单的方式，可是要留意浏览器的支撑
7、display:flex和margin:auto
.box8{display:flex;text-align:center;
}.box8span{margin:auto;
}
8、display:-webkit-box
.box9{display:-webkit-box;-webkit-box-pack:center;-webkit-box-align:center;-webkit-box-orient:vertical;text-align:center；}
9、display:-webkit-box
这种办法，在content元素外刺进一个div。设置此divheight:50%;margin-bottom:-contentheight;。
content铲除浮动，并显现在中心。
.floater{float:left;height:50%;margin-bottom:-120px;
}.content{clear:both;height:240px;position:relative;
}
长处：
适用于一切浏览器
没有足够空间时(例如：窗口缩小)content不会被截断，滚动条出现
缺陷：
仅有我能想到的便是需求额外的空元素了