css 居中(css垂直居中对齐方式)

css居中

一、单行内容的居中只考虑单行是最简单的，不管是否给容器固定高度，只要给容器设置line-height和height，并使两值持平，再加上over-flow:hidden就可以了
.middle-demo-1{height:4em;line-height:4em;overflow:hidden;}
长处：1.同时支撑块级和内联极元素2.支撑一切浏览器缺陷：1.只能显现一行2.IE中不支撑等的居中要注意的是：1.运用相对高度定义你的height和line-height2.不想毁了你的布局的话，overflow:hidden一定要为什么？请比较以下两个例子：
[Ctrl+A全部选择提示：你可先修正部分代码，再按运行]
上一个高度是用的绝对单位px，并且没有隐藏溢出，下一个高度用的单位是相对单位em，并且隐藏了溢出。假如你的浏览器支撑扩大字体，那么尽情地扩大字体，看看会出现什么作用。
二、多行内容居中，且容器高度可变也很简单，给出一致的padding-bottom和padding-top就行
.middle-demo-2{padding-top:24px;padding-bottom:24px;}
长处：1.同时支撑块级和内联极元素2.支撑非文本内容3.支撑一切浏览器缺陷：容器不能固定高度
三、把容器当作表格单元CSS提供一系列diplay特点值，包括display:table,display:table-row,display:table-cell等，能把元素当作表格单元来显现。这是再加上vertical-align:middle,就和表格中的valign=”center”相同了。
.middle-demo-3{display:table-cell;height:300px;vertical-align:middle;}
可惜IE不支撑这些特点，不过在其他浏览器上显现作用非常完美。要注意的是：和一个合法的元素有必要在里相同，display:table-cell元素有必要作为display:table的元素的子孙出现。
长处：不用说了吧，就是表格，作用和表格一模相同缺陷：IE下无效

css垂直居中对齐方式

文字的水平笔直居中
text-align:center;line-height:单前元素高度;
元素的水平笔直居中
1运用肯定定位
/*需求固定宽高*/position:absolute;top:0;left:0;bottom:0;right:0;width:xxx;height:xxxmargin:auto;
2运用肯定定位+calc()
/*需求知道详细的元素宽高值*/position:absolute;width:xxx;height:xxx;top:calc(50%-xxx/2);left:calc(50%-xxx/2)
3.运用肯定定位+transform
/*不需求知道元素的宽高*/position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
4.运用display:flex;
display:flex;justify-content:center;align-items:center;