黑马程序员技术交流社区

标题: 【成都校区】CSS基础篇-水平、垂直居中布局 [打印本页]

作者: 小刀葛小伦 时间: 2019-12-5 10:31
标题: 【成都校区】CSS基础篇-水平、垂直居中布局
水平、垂直居中布局是每个前端人必备掌握的基础技能之一，也是各大公司无比常用的面试题之一，可能我们在实践中用不到这么多的方法，但是掌握主流的垂直居中布局方法，是一个前端人的必须的职业素养之一，本文归纳总结了笔者认为比较实用的一些方法，另外一些奇淫技巧不在本文的讨论范围内
GitHub项目链接
写在前面相关代码我只贴出水平垂直居中的，水平和垂直居中的综合方案代码，水平和垂直居中的分别的代码其实大部分都是融合在水平垂直居中布局中的
水平居中

方法一：父元素text-align 子元素必须是inline-block或者inline
方法二：子元素设置margin:0 auto
方法三：父元素设置position:relative，子元素通过absolute+left+transform水平居中
注意：这里居中的只是子元素的左边线，为了让整个子元素实现真正意义的居中，必须调整至子元素的中线居中，也就是必须向左调整半个子元素宽度的距离
方法四：父元素设置position:relative，子元素通过absolute+left+margin水平居中
注意：这个方法和上面方法三类似，唯一不同的是修正子元素整体定位时，这里用的是margin-left:-xxx，而方法三用的是css3的transform，方法三可以不用知道子元素的宽度，方法四必须知道子元素的宽度
方法五：flex布局

垂直居中

方法一：父元素设置position:relative，子元素通过absolute+top+transform垂直居中
注意：这个方法和水平居中方法三类似，所以也必须调整中心线居中，另外考虑适配性
方法二：父元素设置position:relative，子元素通过absolute+top+margin-top:-xxx垂直居中
注意：这个方法和水平居中方法四类似，所以也必须调整中心线居中，另外必须知道子元素宽度
方法三：文本内容居中设置line-height等于父级元素高度，文本垂直居中
方法四：display:table-cell和vertical-algin: middle 进行垂直居中
注意1：图片的垂直居中也是用这个属性vertical-algin: middle
注意2：table-cell无法自动填充父级元素，除非父级元素是display:table，所以这里也就无法使用width:100%，只能手动设置px宽度，如果想要自适应父元素，也可以，只需要在外层再套一层父元素，设置为display:table即可
注意3：vertical-algin和line-height这两个属性对于行内元素垂直居中是比较常用的，建议读者深入了解一下这两个属性的用法，这里不做详细说明
方法五：flex布局

总结：块级元素水平垂直居中首先列出通用的css样式
通用css样式

[CSS] 纯文本查看 复制代码

/* 父元素通用样式 */

.containerCommon {

  height: 100px;

  background-color: gray;

}



/* 子元素通用样式 */

.itemCommon {

  width: 80px;

  height: 40px;

  background-color: black;

  color: white;

}

综合定位方案1
这个方法就是通过父元素设置position:relative，子元素通过absolute+left+top+margin或transform来达到布局要求，使用margin来调整位置需要知道子元素宽度，使用transform: translate(-50%,-50%)来调整位置，需要考虑适配性

[CSS] 纯文本查看 复制代码

.container-11 {

  position: relative;

}



.item-11 {

  position: absolute;

  left: 50%;

  top: 50%;

  /*这里不用transform的话，就必须知道子元素宽度，通过margin-left和margin-right进行位移*/

  transform: translate(-50%, -50%);

}

综合定位方案2
这个方法就是通过父元素设置position:relative，子元素通过left:0,right:0,top:0,bottom:0,margin:auto来达到布局要求

[CSS] 纯文本查看 复制代码

.container-12 {

  position: relative;

}



.item-12 {

  position: absolute;

  left: 0;

  top: 0;

  bottom: 0;

  right: 0;

  margin: auto;

}

利用display:table和display:table-cell特性
说明：table-cell会自动填充table的空间，垂直居中使用vertical-align:middle; 水平居中可以使用行内元素的text-align:center;，也可以在子元素设置 margin: 0 auto;

[JavaScript] 纯文本查看 复制代码

.container-13 {

  display: table-cell;

  vertical-align: middle;

  text-align: center;

  width: 200px;

}



.item-13 {

  display: inline-block;

  color: white;

  background-color: black;

  /* margin: 0 auto; */

}

flex布局

[JavaScript] 纯文本查看 复制代码

.container-14 {

  display: flex;

  justify-content: center;

  align-items: center;

}

写在后面关于介绍的所有方法水平垂直居中布局方法中，在不考虑兼容性的情况下，首推flex布局，flex的特性现在主流浏览器都已经兼容到了，简介易用的语法，应该没谁不喜欢用了，除非是老版本的IE。其次就是综合定位方案2，相对比较传统的定位布局方法，兼容性都比较好，综合定位方案1要考虑 transform: translate(-50%, -50%)方法的兼容性

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2