在页面布局中，怎么实现水平居中和垂直居中？
先给出DOM结构
<div class="box"><div class="box-center"> </div> </div>
一：水平居中
若是行内元素，给其父元素设置text-align:center即可实现行内元素水平居中
若是块级元素，该元素设置margin:0 auto即可（元素需要定宽）
若是块级元素，设置父元素为flex布局，子元素设置margin:0 auto即可（子元素不需要定宽）
1.使用flex 2012年版本布局，可以轻松的实现水平居中，子元素设置如下:
.box { width: 200px; height: 200px; display: flex; // 使内部的flex项目水平居中 justify-content: center; background-color: pink; }
2.使用绝对定位和CSS3新增的属性transform（这个属性还和GPU硬件加速、固定定位相关）
.box { width: 200px; height: 200px; position: relative; background-color: pink; } .box-center { position: absolute; left:50%; // width: 50%; height: 100%; // 通过 translate() 方法，元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数： // translate(x,y) 定义 2D 转换。 // translateX(x) 定义转换，只是用 X 轴的值。 // translateY(y) 定义转换，只是用 Y 轴的值。 // left: 50% 先整体向父容器的左侧偏移50%，此时是不能居中的，因为元素本身有大小 // 接着使用transform使用百分比向左偏移本身的宽度的一半实现水平居中（这里的百分比以元素本身的宽高为基准） transform:translate(-50%,0); background-color: greenyellow; }
3.使用绝对定位和margin-left（元素定宽）
.box { width: 200px; height: 200px; position: relative; background-color: pink; } .box-center { position: absolute; left:50%; height: 100%; // 类似于transform// width: 50%;// margin-left: -25%; width: 100px; margin-left: -50px; background-color: greenyellow; }
二：垂直居中
若元素是单行文本, 则可设置line-height等于父元素高度
若是块级元素，设置父元素为flex布局，子元素设置margin: auto 0即可（子元素不需要定宽）
1若元素是行内块级元素，基本思想是使用display: inline-block, vertical-align: middle和一个伪元素让内容块处于容器中央：
.box { height: 100px; } .box::after, .box-center{ display:inline-block; vertical-align:middle; } .box::after{ content:''; height:100%; }
2.当居中元素高度不定时，
2.1可用 vertical-align 属性（vertical-align只有在父层为 td 或者 th 时才会生效,，对于其他块级元素，例如 div、p 等，默认情况是不支持的），为了使用vertical-align，我们需要设置父元素display:table, 子元素 display:table-cell;vertical-align:middle：
.box { height: 100px; display: table; } .box-center{ display: table-cell; vertical-align:middle; }
2.2.可用 Flex 2012版, 这是CSS布局未来的趋势。Flexbox是CSS3新增属性，设计初衷是为了解决像垂直居中这样的常见布局问题：优点：内容块的宽高任意, 优雅的溢出. 可用于更复杂高级的布局技术中. 缺点：IE8/IE9不支持、需要浏览器厂商前缀、渲染上可能会有一些问题。↓
.box { height: 100px; display: flex; align-items: center; }
2.3.可用 transform ，设置父元素相对定位：缺点：IE8不支持, 属性需要追加浏览器厂商前缀，可能干扰其他 transform 效果，某些情形下会出现文本或元素边界渲染模糊的现象。
.box { height: 100px; position: relative; background-color: pink; } .box-center { position: absolute; top: 50%; transform: translate(0, -50%); background-color: greenyellow; }
3.居中元素高度固定时
3.1设置父元素相对定位，子元素如下css样式:
.box { position:relative; height: 100px; background-color: pink; } .box-center{ position:absolute; top:50%; // 注意不能使用百分比// margin的百分比计算是相对于父容器的width来计算的，甚至包括margin-top和margin-bottom height: 50px; margin-top: -25px; }
3.2设置父元素相对定位, 子元素如下css样式:
.box { position:relative; width: 200px; height: 200px; background-color: pink; } .box-center{ position:absolute; top: 0; bottom: 0; margin: auto 0; height: 100px; background-color: greenyellow; }
水平垂直居中
Flex布局（子元素是块级元素）
.box { display: flex; width: 100px; height: 100px; background-color: pink; } .box-center{ margin: auto; background-color: greenyellow; } ```css - Flex布局 ```css .box { display: flex; width: 100px; height: 100px; background-color: pink; justify-content: center; align-items: center; } .box-center{ background-color: greenyellow; }
绝对定位实现(定位元素定宽定高)
.box { position: relative; height: 100px; width: 100px; background-color: pink; } .box-center{ position: absolute; left: 0; right: 0; bottom: 0; top: 0; margin: auto; width: 50px; height: 50px; background-color: greenyellow; }
---------------------------
