CSS学习笔记－元素水平垂直居中

NeverSayNever 发布于2019-08-28 18:28 / 3194人阅读

摘要：前言布局中经常会遇到元素水平居中的需求今天根据以前的学习笔记以及看过的一些技术博客做个元素水平居中的小结。文字的水平垂直居中文字水平居中文字的水平垂直居中在于同高然后。

前言

布局中经常会遇到元素水平居中的需求,今天根据以前的学习笔记?以及看过的一些技术博客做个元素水平居中的小结。

正文 图片的水平垂直居中


    //图片地址为http://static.jsbin.com/images/dave.min.svg

.container{
    height:300px;
    width:300px;
    background:yellow;
    text-align:center;
    vertical-align:middle;
    display:table-cell; 
}
img{
    background-color: #333;
    height:230px;
    width:230px;
}

这种方法是通过设置display为table-cell,然后设置text-align、vertical-align为center来实现图片位于父容器中的水平垂直居中,但是缺点是父div无法通过设置margin:0 auto来水平居中。

下面来一个使图片能在父元素中水平垂直居中,父元素也能水平居中的方法。
使用padding或margin填充

.container{
    margin: 80px auto;
    width: 300px;
    height: 300px;
    background-color: yellow;
}
img{
    width: 100px;
    height: 100px;
    padding: 100px; //margin:100px;也可以。
}

该方法是设置好img的长宽,然后和父容器之间长宽的差距用padding来弥补。效果见下图。

此方法是参考了大搜车前端博客中的一篇CSS布局的博文,作者是覃业博,原文是针对父div嵌套子div来到达水平垂直居中的目的,我这里div包裹的子元素img,和子元素是div的样式设置有些许不一样。

文字的水平垂直居中


      文字水平居中

.container{
    line-height:300px;
    width:300px;
    line-height:300px;
    background:yellow;
    text-align:center;
    margin:0 auto;
}

文字的水平垂直居中在于line-height＋line-height同高,然后text-align:center。

利用float和元素设置偏移来水平垂直居中

先上代码:

  
  
    呵呵呵呵呵呵呵呵呵呵呵呵
呵呵呵呵呵呵呵呵呵呵呵呵呵呵
呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵

.super-element{
    width: 100%;
    height: 400px;
    background-color: #ccc;
}

.layout-helper{
    float: left;
/*     display:inline-block; */    
    position: relative;
    background:pink;
    left: 50%;
    top: 50%;
}

.sub-element{
    position: relative;
    left: -50%;
    -webkit-transform:translateY(-50%);
    transform:translateY(-50%);
    background-color: #333;
    color: #fff;
}

效果图:

该方法参考大搜车前端博客中的一篇CSS布局的博文,中心思路就是将需要居中的元素sub-element的父元素layout-helper设置top、left偏移50%,然后设置float使layout-helper缩紧宽度, 再设置sub-element的left为-50%,此时sub-element在水平方向就居中了,而在垂直方向上因为sub-element的父元素layout-helper高度是不确定的,所以给sub-element设置top:-50%因计算不出而无效,此时用到了transform:translateY(-50%);将sub-element偏移-50%,就达到了居中的效果。以上使layout-helper缩紧宽度设置display:inline-block同样可以达到效果。但是如果sub-element内容一多,就会超出父元素,设置super-element为overflow:auto;就会出现以下效果。

针对这个bug,原文作者覃业博也有一个解决方案,利用元素超出父元素的左边不会产生滚动条的特性,但是我没怎么悟透把他那个方案应用到上面这个实例当中,感兴趣的人请戳大搜车前端博客中的一篇CSS布局的博文,个人觉得把super-element设置overflow:hidden也可以,sub-element再长也就两边顶格。

还有一种通过设置添加占位div和设置占位div的margin-bottom:-50%来使元素居中的方案,先上图:

.super-element{
    width: 400px;
    height: 400px;
    margin:0 auto;
    background-color:pink;
}
.layout-helper{
    width: 100%;
    height: 50%;
    margin-bottom:-50px;
}
.sub-element{
    position: relative;
    left: 50%;
    transform:translateX(-50%);
    width: 100px;
    height:100px;
    background-color:yellow;
}

效果图:

其思想就是在super-element中设置一个占super-element宽100%和高50%的div块,我这里命名layout-helper,然后设置它的margin-bottom为sub-element高度的一半,后面接着的sub-element就垂直居中了,然后再设置sub-element的position:relative;left:50%;transform:translateX(-50%);水平也居中了。这里有个注意点,super-element的高度需要确定,这样才能使layout-helper的heigh:50%有效,还有layout-helper的margin-bottom设置的负高度为sub-element高度的一半。这种水平垂直居中方式兼容性较好。

此外还有一种使用定位和margin-top＋margin-left为负子元素长宽来垂直水平居中的方法。上图:

.super-ele{
    position:relative;
    width:300px;
    height:300px;
    margin:100px auto;
    background:pink;
}

.sub-ele{
    position:absolute;
    width:100px;
    height:100px;
    background:yellow;
    top:50%;
    left:50%;
    margin-top:-50px;
    margin-left:-50px;
}

这种方法也是要设置子元素长和宽并且在设置margin-top、margin-left的时候去匹配子元素长宽的一半。

结尾

元素水平居中的技巧还有很多,还有使用Flex的方法,今天先到这里,等我悟透了再慢慢填补文章,以上实例如有错误存在,欢迎各位及时指出。

参考:大搜车前端博客中的一篇CSS布局的博文

超融合服务器私有云水平垂直居中垂直居中实现垂直居中文字垂直居中

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

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

css学习笔记（一）

摘要：元素的高度文档流文档内元素流动的方向叫做文档流。块级元素高度一个元素的高宽度是由其内容决定的，不到万不得已的时候一般不要设置宽高，块级元素高度是由其内部文档流高度总和决定的，并不一定是等于，只是决定，例如设置字体是，但是它的元素高度却不是。 position定位 CSS position属性用于指定一个元素在文档中的定位方式。top，right，bottom 和 left 属性则决定了...

dadong 2019-08-29 15:41 评论0 收藏0
前端-CSS3&H5

摘要：高度模型浅识为的简写，简称为块级格式化上下文，为浏览器渲染某一区域的机制，中只有和中还增加了和。并非所有的布局都会在开发中使用，但是其中也会涉及一些知识点。然而在不同的纯制作各种图形纯制作各种图形多图预警一劳永逸的搞定 flex 布局寻根溯源话布局一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看到 float 属性不...

Hydrogen 2019-08-05 12:48 评论0 收藏0
前端-CSS3&H5

摘要：高度模型浅识为的简写，简称为块级格式化上下文，为浏览器渲染某一区域的机制，中只有和中还增加了和。并非所有的布局都会在开发中使用，但是其中也会涉及一些知识点。然而在不同的纯制作各种图形纯制作各种图形多图预警一劳永逸的搞定 flex 布局寻根溯源话布局一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看到 float 属性不...

xiaolinbang 2019-08-29 14:14 评论0 收藏0
CSS || 元素垂直居中笔记

摘要：种元素垂直居中根据不同情况，使用的垂直居中方式各异针对块级元素与行级元素的垂直居中不同。行级元素行内包含特殊元素如果行内包含特殊元素图片输入框元素或者粗体使用设置对齐方式即可垂直居中。 CSS种元素垂直居中根据不同情况，使用的垂直居中方式各异：针对块级元素与行级元素的垂直居中不同。 1 行级元素 1.1 行内包含特殊元素如果行内包含特殊元素：图片、input输入框、inline-...

VPointer 2019-08-29 12:12 评论0 收藏0
css - 收藏集 - 掘金

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

phpmatt 2019-08-29 12:41 评论0 收藏0