居中的实现

文本居中

height + line-height：两者配合使用，垂直方向居中
text-align：父级的text-align，水平方向居中
注意：text-align：center ；只是将子元素里的内联元素居中
如果不是内联元素就要用到 margin： 0 auto；
写个简单的代码来理解

  1. .word{    
  2.   width: 100px;  
  3.   height: 30px;   
  4.   background: #E5E5E5;  
  5.   text-align: center;   
  6.   line-height: 30px;   
  7.   font-size: 14px;
  8. }

水平居中

水平居中分两种情况
a：定宽块元素水平居中
定宽 + 块元素
来看看具体的代码.

  1. wrap{
  2.   width:200px;
  3.   height:200px;
  4.   border:1px solid red;
  5.   margin:0 auto;
  6.   } //宽度必须给值

b：不定宽块元素水平居中
1.改变为行内元素,然后使用text-align:center处理,多用于不定项导航的ul的居中

  1. .nav{text-align:center;}
  2. .nav ul{display:inline;}

2.父元素浮动left：50%;
同时要设置position:relative(给子元素相对定位一个参考)
子元素相对定位position：relative；left：-50%；

  1. .wrap{
  2.   position:relative;
  3.   left:50%;
  4.   float:left;
  5. }
  6. .box{
  7.   position:relative;
  8.   left:-50%;
  9. }

垂直居中

垂直居中也分两种情况
one：块级元素垂直居中，子元素知道具体宽高
设置top:50%，这个块元素的最上边为垂直居中的位置，但是这样整体的内容并不是垂直居中，所以要设置margin-top: -2/父宽 px; //为高度的一半
这样这个块元素又相对于自身最上面向上又移动了自身的50%，因此就垂直居中了。

  1. .wrap {  //父元素}
  2. .wrap .content {
  3. position: absolute;
  4. width: 100px;
  5. heigth: 100px;
  6. top: 50%;
  7. margin-top: -50px; //为高度的一半}

two：子元素不知道具体宽高
这种情况有三种方法
第一种借助table布局；
第二种是借助translate的transform属性:

  1. .wrap { 
  2.   position: relative;
  3. }
  4. .wrap .content {  
  5.   position: absolute; 
  6.   top: 50%; 
  7.   transform: translateY(-50%);
  8. }

第三种就是用flex布局，非常的简单,代码如下:

  1. .wrap{ 
  2.   display: flex;  
  3.   flex-direction: column;  
  4.   justify-content: center;
  5. }

万能居中方法
首先移动子元素高度(宽度)的一半：left：50%;(top:50%;)
再移动父元素高度(宽度)的一半：margin-left:-宽/2;(margin-top:-高/2;)
前提是必须要知道子元素的宽高

  1. .wrap{
  2. width: 200px;
  3. height: 200px;
  4. background-color: lightskyblue;
  5. position: relative;
  6. }
  7. .box{
  8. width: 100px;
  9. height: 100px;
  10. background-color: hotpink;
  11. position: absolute;
  12. left:50%;
  13. margin-left: -50px;
  14. }

万能居中

绝对居中

子元素必须比父元素小，子元素宽高也必须要知道

  1. .wrap{
  2. width: 200px;
  3. height: 200px;
  4. background-color: lightskyblue;
  5. position: relative;
  6. }
  7. .box{
  8. width: 100px;
  9. height: 100px;
  10. background-color: hotpink;
  11. position: absolute;
  12. top: 0;
  13. right: 0;
  14. bottom: 0;
  15. left: 0;
  16. margin: auto;
  17. overflow: auto;
  18. }

相关资源：HTML之三种居中_html居中代码-Web开发文档类资源-CSDN文库
Triple A

CSS常见的布局

table布局

table布局在如今已经很少使用，原因是：table布局比其它html标记占更多的字节，会阻挡浏览器渲染引擎的渲染顺序，会影响其内部的某些布局属性的生效。
使用table布局有两种方式

  • table标签
  • display：table

    float布局

    float布局主要依赖与float这个属性，float的元素也称为float元素或者浮动元素，浮动元素会从普通的文档流中脱离，并且会影响其他周围的元素

    float布局的特性

    脱离文档流，但不脱离文字流
    形成块级，被加上float的元素都是块级元素
    高度塌陷
    尽量靠上但是如果一行的宽度满足不了浮动元素的要求就会尽量靠左

    flex布局

    flex布局（弹性盒子）
    能自适应屏幕大小，并且对于移动端的开发非常方便
    用法
    当父元素设置flex时子 元素的float clear vertical-align将失效
    给盒子元素添加 display：flex 设置盒子为flex布局
    一般是给父容器添加这个属性
    1. flex-direction:设置主轴的方向
    2.       取值：   row（默认值）：从左到右（第三个）
    3.                    row-reverse:从右到左（第四个）
    4.                    colum:从上到下（第二个）
    5.                    colum-reverse:从下到上（第一个）
    6.   flex-wrap：设置当一行放不下元素是是否换行
    7.       notwrap：不换行（默认值）
    8.       wrap:换行    第二行在第一行下面
    9.   wrap-reverse： 第二行再第一行上面 和wrap相反
    10.       justify-content： 子元素对其方式
    11.               flex-start：在对齐
    12.               flex-end：右对齐
    13.               center：居中
    14.               space-around: 居中效果 中间的间距会比两侧大一倍（中间等于有左元素的间距+右元素间距所以大一倍）
    15. align-item对单行进行对齐
    16. align-item:这个属性要根据flex-direction的属性
    17. 当flex-direction设置为row时 align-item是根据 column进行对齐的
    18. 当flex-direction设置为column时 align-item是根据 row进行对齐
    19. 简单说就是根据flex-direction相反的值
    20. 注意 row-reverse也算是 row
    21. align-item:取值 此时我默认为flex-direction为row
    22. flex-start： 按照column 对齐 （效果：向上对齐

    响应式布局

    响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局。传统的开发方式是PC端开发一套，手机端再开发一套，而使用响应式布局只要开发一套就够。

优点
面对不同分辨率设备灵活性强
能够快捷解决多设备显示适应问题
缺点
仅适用布局、信息、框架并不复杂的部门类型网站
兼容各种设备工作量大，效率低下
代码累赘，会出现隐藏无用的元素，加载时间加长
其实这是一种折中性质的设计解决方案，多方面因素影响而达不到最佳效果
一定程度上改变了网站原有的布局结构，会出现用户混淆的情况
————————————————
meta 标签
最简单的处理方式是加上一个 meta 标签

  1. <meta name="viewport" content="width=device-width, initial-scale=1">

其中，width = device-width 这一句的意思是让页面的宽度等于屏幕的宽度。

使用 rem
rem 指的是 html 元素的 font-size，html 元素的 font-size 默认是 16px，所以 1 rem = 16px；然后根据 rem 来计算各个元素的宽高，然后配合 media query 就可以实现自适应。
media query
css2 允许用户根据特定的 media 类型定制样式，基本语法如下

@media screen and (max-width: 360px) {  
     html { font-size: 12px;    }
}

意思就是： 当屏幕的宽度小于等于 360 px 的时候 html 的字体大小为 12 px。
有一个需要注意的点是范围大的要放在上面，范围小的放在下面。假设有两个样式，一个适应 360px 以下，一个适应 640px 以下，如果 360px 的放在上面，但是小于 360px 同样满足小于 640px，这就不是我们想要的结果了，所以范围大的需要放在上面。

Grid布局

网格布局是基于一个二维的网格的布局系统，可以同时处理行和列。flex和grid有着实质的区别，flex是一维布局，flex布局一次只能处理一行或者一列（或者说单轴），而grid布局可以应用多个轴