转载

网页元素CSS居中实现完整攻略

水平居中：行内元素解决方案

只需要把行内元素包裹在一个属性display为block的父层元素中，并且把父层元素添加如下属性即可：

.parent {     text-align:center; }

水平居中：块状元素解决方案

.item {     /* 这里可以设置顶端外边距 */     margin: 10px auto; }

水平居中：多个块状元素解决方案

将元素的display属性设置为inline-block，并且把父元素的text-align属性设置为center即可:

.parent {     text-align:center; }

水平居中：多个块状元素解决方案 (使用flexbox布局实现)

使用flexbox布局，只需要把待处理的块状元素的父元素添加属性display:flex及justify-content:center即可:

.parent {     display:flex;     justify-content:center; }

垂直居中：单行的行内元素解决方案

.parent {  background: #222;  height: 200px; } /* 以下代码中，将a元素的height和line-height设置的和父元素一样高度即可实现垂直居中 */ a {  height: 200px;  line-height:200px;   color: #FFF; }

垂直居中：多行的行内元素解决方案

组合使用display:table-cell和vertical-align:middle属性来定义需要居中的元素的父容器元素生成效果，如下：

.parent {  background: #222;  width: 300px;  height: 300px;  /* 以下属性垂直居中 */  display: table-cell;  vertical-align:middle; }

垂直居中：已知高度的块状元素解决方案

.item{  top: 50%;  margin-top: -50px;  /* margin-top值为自身高度的一半 */  position: absolute;  padding:0; }

垂直居中：未知高度的块状元素解决方案

.item{     top: 50%;     position: absolute;     transform: translateY(-50%);  /* 使用css3的transform来实现 */ }

水平垂直居中：已知高度和宽度的元素解决方案1

这是一种不常见的居中方法，可自适应，比方案2更智能，如下：

.item{  position: absolute;  margin:auto;  left:0;  top:0;  right:0;  bottom:0; }

水平垂直居中：已知高度和宽度的元素解决方案2

.item{  position: absolute;  top: 50%;  left: 50%;  margin-top: -75px;  /* 设置margin-left / margin-top 为自身高度的一半 */  margin-left: -75px; }

水平垂直居中：未知高度和宽度元素解决方案

.item{  position: absolute;  top: 50%;  left: 50%;  transform: translate(-50%, -50%);  /* 使用css3的transform来实现 */ }

水平垂直居中：使用flex布局实现

.parent{  display: flex;  justify-content:center;  align-items: center;  /* 注意这里需要设置高度来查看垂直居中效果 */  background: #AAA;  height: 300px; }

正文到此结束

所属分类：编程技术

本文标签： tab DDL 自适应智能代码 CSS
版权声明： 本文为互联网转载文章，出处已在文章中说明(部分除外)。如果侵权，请联系本站长删除，谢谢。
本文海报： 生成海报一生成海报二

其他链接

关于本站

本站定位：个人技术类博客

本站作用：写博客、记日志、闲聊扯淡鼓捣技术。

问题交流

网页元素CSS居中实现完整攻略

水平居中：行内元素解决方案

水平居中：块状元素解决方案

垂直居中：单行的行内元素解决方案

垂直居中：已知高度的块状元素解决方案

垂直居中：未知高度的块状元素解决方案

水平垂直居中：已知高度和宽度的元素解决方案2

水平垂直居中：未知高度和宽度元素解决方案

水平垂直居中：使用flex布局实现

热门推荐

相关文章

说给你听

本文目录

随机标签

书籍教程

近期评论

网站信息

其他链接

关于本站

问题交流