《HTML5 - 庖丁解牛》0005笔记
本帖最后由 chesir 于 2017-6-12 18:55 编辑0005笔记
1.文字水平居中
把文字放到页面中间，必须通过设置水平、竖直两个方向都是“居中”
继续在CSS样式下，设置container，宽度为100%，横向撑满屏幕
* 然后文字居中。
* 然后设置水平center即可
#container{
width: 100%;
text-align: center;
2.垂直居中
* 通过改变container的top属性来进行垂直居中。
* 在此之前，需要对container得父级，body增加一些初始化定义
增加 body 代码如下：
margin: 0;
padding: 0;
position: relative;

* 通过预设内边距、外边距为0，提高自主控制
jj{:10_245:}下面这个好难懂(⊙o⊙)
* 当你想要设置container的top属性，那么前提条件必须是：container的定位方式必须是：“absolute绝对定位”，而container的绝对定位必须是父级body：“relative相对定位”，所以，先设置body的positon为relative，才能设置container的position为absolute，最终才能设置top属性。
{:10_277:}纠结看了很多次，没理解————
* position，是CSS中的重要属性，定位属性，指定了绝对和相对等定位元素，后续详细介绍
* 修改，container 代码：
position: absolute;
top: 50%
* 还需要container向上移动，当移动距离为container内容高度一半时，才算垂直居中。
* HTML5中，只需要设置transform-translateY就可以，使contianer在Y轴方向上向上移动50%，就是一半，就无需声明 • container具体有多高啦
* 在 container 添加如下代码：
transform: translateY(-50%);
页:
[1]