《HTML5 - 庖丁解牛》0005笔记

chesir

0005笔记
1.文字水平居中
        把文字放到页面中间，必须通过设置水平、竖直两个方向都是“居中”
        继续在CSS样式下，设置container，宽度为100%，横向撑满屏幕
* 然后文字居中。
* 然后设置水平center即可


1. #container{
   
2.                         width: 100%;
   
3.                         text-align: center;

复制代码

2.垂直居中
* 通过改变container的top属性来进行垂直居中。
* 在此之前，需要对container得父级，body增加一些初始化定义
        增加 body 代码如下：

1. margin: 0;
   
2.                         padding: 0;
   
3.                         position: relative;

复制代码


* 通过预设内边距、外边距为0，提高自主控制
jj下面这个好难懂(⊙o⊙)

* 当你想要设置container的top属性，那么前提条件必须是：container的定位方式必须是：“absolute绝对定位”，而container的绝对定位必须是父级body：“relative相对定位”，所以，先设置body的positon为relative，才能设置container的position为absolute，最终才能设置top属性。
纠结看了很多次，没理解————

* position，是CSS中的重要属性，定位属性，指定了绝对和相对等定位元素，后续详细介绍
    * 修改，container 代码：


1. position: absolute;
   
2.                         top: 50%

复制代码

* 还需要container向上移动，当移动距离为container内容高度一半时，才算垂直居中。
* HTML5中，只需要设置transform-translateY就可以，使contianer在Y轴方向上向上移动50%，就是一半，就无需声明        •        container具体有多高啦
    * 在 container 添加如下代码：


1. transform: translateY(-50%);

复制代码