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

mikasa 发布于2019-08-28 18:19 / 2845人阅读

摘要：水平居中行内元素解决方案只需要把行内元素包裹在一个属性为的父层元素中，并且把父层元素添加如下属性即可水平居中块状元素解决方案这里可以设置顶端外边距水平居中多个块状元素解决方案将元素的属性设置为，并且把父元素的属性设置为即可水平居中多

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

只需要把行内元素包裹在一个属性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;
}

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111163.html

HTML+CSS基础课程-imooc-【更新完毕】

摘要：包含后代选择器包含选择器，即加入空格用于选择指定标签元素下的后辈元素。而后代选择器是作用于所有子后代元素。后代选择器通过空格来进行选择，而子选择器是通过进行选择。 6-1 认识CSS样式 CSS全称为层叠样式表 (Cascading Style Sheets)，它主要是用于定义HTML内容在浏览器内的显示样式，如文字大小、颜色、字体加粗等。使用CSS样式的一个好处是通过定义某个样式，可...

Heier 2019-08-01 15:04 评论0 收藏0
css - 收藏集 - 掘金

摘要：绝对底部前端掘金来自国外的设计达人，纯，可以实现当正文内容很少时，底部位于窗口最下面。有效解决图片使用单位边角缺失的问题前端掘金起因在移动端使用布局时图片也需要用单位。 CSS 绝对底部 - 前端 - 掘金来自国外的设计达人，纯CSS，可以实现: 当正文内容很少时，底部位于窗口最下面。当改变窗口高度时，不会出现重叠问题。甚至，创造该CSS的人还专门成立一个网站介绍这个CSS底部布局方案...

phpmatt 2019-08-29 12:41 评论0 收藏0
老生常谈之CSS的垂直居中

摘要：在通常情况下，对那些需要居中的元素来说，其尺寸往往是由其内容来决定的。虽然没有垂直居中效果，但也是完全可以接受的。的另一个好处在于，它还可以将匿名容器即没有被标签包裹的文本节点垂直居中。主要摘自：《CSS 揭秘》，强烈推荐的一本书。 44 年前我们就把人类送上月球了，但现在我们仍然无法在 CSS 中实现垂直居中。——James Anderson(https://twitter.co...

CompileYouth 2019-08-30 15:55 评论0 收藏0
前端练级攻略(第二部分)

摘要：是文档的一种表示结构。这些任务大部分都是基于它。这个实践的重点是把你在前端练级攻略第部分中学到的一些东西和结合起来。一旦你进入框架部分，你将更好地理解并使用它们。到目前为止，你一直在使用进行操作。它是在前端系统像今天这样复杂之前编写的。本文是前端练级攻略第二部分，第一部分请看下面：前端练级攻略(第一部分) 在第二部分，我们将重点学习 JavaScript 作为一种独立的语言，如...

BWrong 2019-08-23 16:49 评论0 收藏0
[译] 前端攻略-从路人甲到英雄无敌二：JavaScript 与不断演化的框架

摘要：一般来说，声明式编程关注于发生了啥，而命令式则同时关注与咋发生的。声明式编程可以较好地解决这个问题，刚才提到的比较麻烦的元素选择这个动作可以交托给框架或者库区处理，这样就能让开发者专注于发生了啥，这里推荐一波与。本文翻译自FreeCodeCamp的from-zero-to-front-end-hero-part。继续译者的废话，这篇文章是前端攻略-从路人甲到英雄无敌的下半部分，在...

roadtogeek 2019-08-19 18:25 评论0 收藏0