精华内容
下载资源
问答
  • 大家好,我是小梅,公众号:「小梅的前端之路」 原创作者。...前提:元素之前的布局关系如下,需要实现class为son该元素的垂直居中 <style> .son { width: 200px; height: 200px; background-color: p

    大家好,我是小梅,公众号:「小梅的前端之路」 原创作者。

    作为在前端领域不断探索的一员,在此记录开发中遇到的问题,如果你也遇到了相同的问题,希望本文对你有帮助。


    在开发中经常需要实现的一个页面效果是:元素的垂直居中。

    在此记录一下,经常使用的几种方法。

    前提:元素之间的布局关系如下,需要实现son元素的垂直居中

    <style>
    .son {
          width: 200px;
          height: 200px;
          background-color: pink;
     }
    </style>
    <div class="parent">
      <div class="son"></div>
    </div>

    方法1:使用绝对定位 + transform,给子元素添加如下样式

    这种方式比较常用,父子元素都不确定宽高的情况也适用。

    如果子元素的宽高确定的话,translate中的值也可以设置为子元素宽高的一半,即transform: translate(-100px, -100px);

    .work {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
    }

    方法2:使用绝对定位 + margin,给子元素添加如下样式

    这种方式适合子元素宽高确定的情况,给margin-top设置百分比的大小将不生效,即margin-top: -50%;不能达到垂直居中的效果

    .work1 {
          position: absolute;
          top: 50%;
          left: 50%;
          margin-top: -100px;
          margin-left: -100px;
    }

    方法3:使用绝对定位 + margin: auto,给子元素添加如下样式

    父子元素宽高都未知时也适用。

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

    方法4:父元素使用flex布局,并设置相关的属性值为center

    这种方式要求父元素的高度是确定的,百分比形式的高度将不能生效。

    有关flex布局的使用可以参考廖雪峰老师的文章Flex布局教程

    .par-work {
        height: 100vh;
        display:flex;
        justify-content:center;
        align-items:center;
    }

    方法5:使用table-cell实现

    这种方式需要父元素的宽高都是确定的,才能保证子元素在父元素中垂直水平都居中。

    .par-work2 {
        height: 500px;
        width: 500px;
        display: table-cell;
        vertical-align: middle;
        text-align: center;
    }
    .son-work2 {
        display: inline-block;
    }

    方法6:使用grid布局

    这种方式适用于父元素高度确定的情况,有关gird布局的使用可以参考廖雪峰老师的文章CSS Grid布局教程

    .par-work3 {
        display: grid;
        height: 500px;
    }
    .son-work3 {
        align-self: center; /*设置单元格内容的垂直位置*/
        justify-self: center; /*设置单元格内容的水平位置*/
    }

    多有参考网上的其他的方案,仅以此记录一下,方便后续查找使用。

    ❤️欢迎素质三连[点赞 + 收藏 + 评论]

    我是小梅,有兴趣的话可以在微信搜一搜「小梅的前端之路」第一时间接收文章更新通知,一起沟通、学习成长呀。

     

    展开全文
  • CSS实现水平垂直居中好用方法

    千次阅读 2020-06-14 17:07:59
    CSS实现水平垂直居中父元素没有高度父元素增加padding:10px 0;父元素有高度一、Flex布局二、定位使用absolute+margin ①使用absolute+margin ②translate代替margin负值三、tabletable-cell+vertical-align+text-...

    父元素没有高度

    父元素增加padding:10px 0;

    代码如下

        .parent {
            width: 300px;
            border: 2px solid rgb(216, 41, 17);
            padding:10px 0;
        }
        .child {
            width: 100px;
            height: 100px;
            background-color: rgb(43, 183, 226);
            margin:auto;
        }
    
    

    结果如下:
    image

    父元素有高度

    一、Flex布局

    在父元素上设置flex,并设置justify-content和align-items为center,使得子元素水平垂直居中,不需要设置子元素

    .parent {
                display: flex;
                justify-content: center;
                align-items: center;
                width: 300px;
                height: 300px;
                border: 2px solid rgb(216, 41, 17);
            }
    

    结果如下:
    image

    • 优点:使用方便,不需要进行计算,只对父元素进行操作即可
    • 缺点:浏览器兼容性较差,子元素使用float、position等将失效,和其他布局混合使用会相互影响

    二、定位

    使用absolute+margin ①

    子绝父相+子元素四个方向都为0+margin:auto
    前提条件:子元素宽高已知

     .parent {
                position: relative;
                width: 300px;
                height: 300px;
                border: 2px solid rgb(216, 41, 17);
            }
            
            .child {
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0; 
                margin: auto;
                width: 100px;
                height: 100px;
                background-color: rgb(43, 183, 226); 
            }
    

    结果如下:
    image

    • 定位要设置父元素为相对定位,子元素为绝对定位
    • 四个方向都设置为0,然后用margin控制居中

    使用absolute+margin ②

    使用margin负值进行相对移动,子绝父相+left、top+margin
    前提条件:子元素宽高已知

     .parent {
                position: relative;
                width: 300px;
                height: 300px;
                border: 2px solid rgb(216, 41, 17);
    }
            
    .child {
                position: absolute;
                top: 50%;
                left: 50%;
                margin-left: -50px;
                margin-top:-50px;
                width: 100px;
                height: 100px;
                background-color: rgb(43, 183, 226);
    }
    

    代码分析:
    image

    • left、top是相对父元素的宽高,所以移动到50%实际上多移动了自身的50%,使用margin负值将元素再往回移动自身宽高的一半

    translate代替margin负值

    使用margin负值的目的是将元素往回移动自身宽高一半,但是有时子元素并没有宽高,那我们怎么知道自身一半是多少呢?

    • transform中translate移动就是相对自身宽高,使用translate即可代替margin的计算

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

    .child {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%,-50%);
                width: 100px;
                height: 100px;
                background-color: rgb(43, 183, 226);
    }
    

    结果和上面一样滴!

    三、table

    table-cell+vertical-align+text-align

     .parent {
                display: table-cell;
                vertical-align: middle;
                text-align: center;
                width: 300px;
                height: 300px;
                border: 2px solid rgb(216, 41, 17);
    }
            
            .child {
                display: inline-block;
                width: 100px;
                height: 100px;
                background-color: rgb(43, 183, 226);
    }
    

    结果如下:
    image

    • 优点:使用方便
    • 缺点:占用了两个display,如果需要设置其他布局则会影响

    使用table标签

    不推荐。使用table有很多冗余标签而且实现方式类似上面,不如直接使用table-cell

    展开全文
  • 说起水平垂直居中大家常看到的是...接下来我们就针对这个自设问题,来一起探讨其他几种实现水平垂直居中的方案。 为了更好的阐述后面的方案,我们这里有一个命题:让未知大小容器(未知行数的文本)实现水平垂直居中
  • Ⅰ: 水平居中(margin: 0 auto) .horizontal-center { background-color: #809399; height: 100px; width: 200px; line-height: 100px; text-align: center; /* 水平居中 */ margin: 0 auto; }

    一: 水平居中(margin: 0 auto)

    .horizontal-center {
    	background-color: #809399;
    	height: 100px;
    	width: 200px;
    	line-height: 100px;
    	text-align: center;
    	/* 水平居中 */
    	margin: 0 auto;
    }
    

    在这里插入图片描述

    二: 绝对定位居中(Absolute Centering)

    2.0 单个box的垂直居中
    .absolute-center {
    	background-color: #909399;
    	height: 100px;
    	width: 200px;
    	line-height: 100px;
    	text-align: center;
    
    	/* 垂直居中 */
    	margin: auto;
    	position: absolute;
    	top: 0;
    	left: 0;
    	bottom: 0;
    	right: 0;
    }
    

    在这里插入图片描述

    2.1 容器container内的居中
    .absolute-center-1-p {
    	height: 300px;
    	position: relative;
    	background-color: #1e5303;
    }
    
    .absolute-center-1 {
    	background-color: #14a076;
    	height: 50%;
    	width: 50%;
    	overflow: auto;
    	margin: auto;
    	position: absolute;
    	top: 0;
    	left: 0;
    	bottom: 0;
    	right: 0;
    }
    
    <div class="absolute-center-1-p">
    	<div class="absolute-center-1"> Hello World!</div>
    </div>
    

    在这里插入图片描述

    2.2 容器container内的居中
    .is-transformed-parent {
    	height: 300px;
    	position: relative;
    	background-color: #1e5303;
    }
    
    .is-transformed {
    	background-color: #FFF;
    	width: 50%;
    	margin: auto;
    	height: 50%;
    	position: absolute;
    	top: 50%;
    	left: 50%;
    	-webkit-transform: translate(-50%, -50%);
    	-ms-transform: translate(-50%, -50%);
    	transform: translate(-50%, -50%);
    }
    
    <div class="is-transformed-parent">
    	<div class="is-transformed"> Hello World!</div>
    </div>
    

    在这里插入图片描述

    2.3 容器container内的居中
    .display-container {
    	background-color: #1e5303;
    	display: flex;
    	height: 150px;
    	justify-content: center;
    	align-items: center;
    	color: #FFF;
    }
    
    <div class="display-container">
    	Hello World
    </div>
    

    在这里插入图片描述

    展开全文
  • css实现水平垂直居中对齐 仅居中元素固定宽高适用 absolute + 负margin absolute + margin auto absolute + calc 居中元素不定宽高 absolute + transform lineheight css-table flex grid 仅居中元素固定宽高...

    css实现水平垂直居中对齐

    仅居中元素固定宽高适用

    • absolute + 负margin
    • absolute + margin auto
    • absolute + calc

    居中元素不定宽高

    • absolute + transform
    • lineheight
    • css-table
    • flex
    • grid

    仅居中元素固定宽高适用
    1、absolute + 负margin

    绝对定位的百分比是相对于父元素的宽高,通过这个特性可以让子元素的居中显示,但绝对定位是基于子元素的左上角,期望的效果是子元素的中心居中显示

    为了修正这个问题,可以借助外边距的负值,负的外边距可以让元素向相反方向定位,通过指定子元素的外边距为子元素宽度一半的负值,就可以让子元素居中了,css代码如下

    .dbox {  //父元素
        border: 1px solid red;
        position: relative;
        width: 300px;
        height: 300px;
    }
    .box {  //子元素
        width: 100px;
        height: 100px;
        background: skyblue;
        top: 50%;
        left: 50%;
        margin-left: -50px;
        margin-top: -50px;
        position: absolute;
    }
    

    2、absolute + margin auto

    这种方式通过设置各个方向的距离都是0,此时再讲margin设为auto,就可以在各个方向上居中了

    .dbox {
        border: 1px solid red;
        position: relative;
        width: 300px;
        height: 300px;
    }
    .box {
        width: 100px;
        height: 100px;
        background: skyblue;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
    }
    

    3、absolute + calc

    css3带来了计算属性,既然top的百分比是基于元素的左上角,那么在减去宽度的一半就好了,代码如下

    .dbox {
        border: 1px solid red;
        position: relative;
        width: 300px;
        height: 300px;
    }
    .box {
        width: 100px;
        height: 100px;
        background: skyblue;
        position: absolute;
        top: calc(50% - 50px);
        left: calc(50% - 50px);
      }
    

    居中元素不定宽高

    1、absolute + transform

    修复绝对定位的问题,还可以使用css3新增的transform,transform的translate属性也可以设置百分比,其是相对于自身的宽和高,所以可以讲translate设置为-50%,就可以做到居中了,代码如下

    .dbox {
        border: 1px solid red;
        position: relative;
        width: 300px;
        height: 300px;
    }
    .box {
        background: skyblue;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    

    2、lineheight

    把box设置为行内元素,通过text-align就可以做到水平居中,通过vertical-align也可以在垂直方向做到居中,代码如下

    .dbox {
        border: 1px solid red;
        width: 300px;
        height: 300px;
        line-height: 300px;
        text-align: center;
        font-size: 0px;
    }
    .box {
        background: skyblue;
        font-size: 16px;
        display: inline-block;
        vertical-align: middle;
        line-height: initial;
        text-align: left; /* 修正文字 */
    }
    

    3、css-table

    css新增的table属性,可以让我们把普通元素,变为table元素的现实效果,通过这个特性也可以实现水平垂直居中

    .dbox {
        border: 1px solid red;
        width: 300px;
        height: 300px;
        display: table-cell;
        text-align: center;
        vertical-align: middle;
    }
    .box {
        background: skyblue;
        display: inline-block;
    }
    

    4、flex

    目前在移动端已经完全可以使用flex了,PC端需要看自己业务的兼容性情况

    .dbox {
        border: 1px solid red;
        width: 300px;
        height: 300px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .box {
        background: skyblue;
    }
    

    5、grid

    css新出的网格布局,通过grid也可以实现水平垂直居中

    .dbox {
        border: 1px solid red;
        width: 300px;
        height: 300px;
        display: grid;
    }
    .box {
        background: skyblue;
        justify-self: center;
    }
    

    总结

    • PC端有兼容性要求,宽高固定,推荐absolute + 负margin
    • PC端有兼容要求,宽高不固定,推荐css-table
    • PC端无兼容性要求,推荐flex
    • 移动端推荐使用flex
    展开全文
  • 划重点,这是一道面试必考题,很多面试官都喜欢问这个问题,我就被问过好几次了要实现上图的效果看似很简单,实则暗藏玄机,本文总结了一下CSS实现水平垂直居中的方式大概有下面这些,本文将逐一介绍一下,我将本文...
  • css实现水平垂直居中的几种方式

    千次阅读 2019-01-23 15:42:58
    总结了一下css实现水平垂直居中比较常用的几种方法 居中元素宽高固定时的方法 absolute + top:50% left:50% + margin负值 absolute + top:0 left:0 right:0 botton:0 + margin:auto absolute + top:calc left:calc ...
  • 有父元素div[#parent],有子元素div[#child],用css实现子元素在父元素中”水平垂直居中” <div id="child"></div> 效果描述:方案实现:方案1#parent{ width: 220px; height: 220px; background-color: #B94...
  • 最全CSS3实现水平垂直居中的10种方案

    万次阅读 多人点赞 2019-06-28 14:53:25
    最全的实现水平垂直居中方案
  • 主要介绍了使用css实现的div水平垂直居中并且兼容chrome、ie8,具体示例如下,需要的朋友可以参考下
  • CSS实现水平垂直居中的几种方式

    千次阅读 2020-10-13 16:20:01
    意味着把剩余的空间分配给 margin,并且左右均分, 所以就实现水平居中垂直方向同理。 副作用: left: 0; right: 0; 相当于 width: 100%; top: 0; bottom: 0; 相当于 height: 100%; 缺点:需要固定居中元素的宽...
  • 主要介绍了CSS水平垂直居中解决方案(6种)的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 一、居中元素定宽高 1.absolute + 负margin 假设HTML代码如下,总共两个元素,父元素和子元素(带有size代表定宽高的子元素) <div class="wp"> <div class="box size">123123</div> </div&...
  • 1、文字水平居中CSS中想要让文字水平居中,可以使用text-align:center;。text-align是一个基本的属性,它会影响一个元素中的文本行互相间的对齐方式。值left、right和center会导致元素中的文本分别左对齐、右对齐...
  • css 实现水平垂直居中的三种常用方法 首先基本结构样式 <body> <div class="box"> <span></span> </div> </body> 使里面的span元素(粉色圆点)水平垂直居中于其div父元素...
  • 弹性布局可以理解为将盒子分为若干块,通过css对弹性布局的几个属性的控制,将盒中盒移动到合适位置。这是七娃对弹性布局flex的初步认知! flex的属性:fle...
  • 一、flex-direction: (元素排列方向) ※ flex-direction:row (横向从左到右排列==左对齐) ※ flex-direction:row-reverse (与row 相反)  ※ flex-direction:column (从上往下排列==顶对齐) ...
  • 常用居中方式 水平居中 a:行内元素:text-align:center; 代码: <input type="text" value="这是一个行内...b:使用margin+auto来实现水平居中 实现原理:margin: 0 auto:上下边界为0,左右根据宽度自适应。 ...
  • 垂直居中在IE浏览器下的实现比较难实现,而更难实现的应该是未知内容高度的垂直水平居中!还好网上也有很多高人发布了一些解决的方法!这里我进行了一些改良,兼容FF,IE6,IE7,Opera…如发现问题有劳回复评论! ...
  • 主要给大家介绍了css实现元素水平垂直居中的两种方式,文中给出了完整的示例代码供大家参考学习,对大家的学习或者工作具有一定的参考价值,有需要的朋友们下面来一起看看吧。
  • CSS实现水平垂直居中的常用方法

    千次阅读 2019-11-10 19:00:27
    居中又可以分为水平居中和垂直居中。我们以下面这个小例子来演示水平居中和垂直居中。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>index</title&...
  • Flexbox实现一个div元素在body页面中水平垂直居中: ... <!... <...Flexbox制作CSS布局实现水平垂直居中</title>  <style type="text/css">  html { height: 100%; }  body
  • .d1 { display:table; height: 200px; } .d2 { vertical-align:middle;...主要解决数据行数非统一,又要实现上下居中的问题。 大体效果如图;
  • 垂直居中水平居中 1、让文本水平居中 ① 设置字体属性 text-align:center 设置在字体的父元素上 ②利用弹性布局display:flex 然后设置布局下的属性justify-content:center 都是设置在字体的父元素上 2、让文本...
  • div+css实现水平/垂直/水平垂直居中超详解

    千次阅读 多人点赞 2019-10-12 19:51:18
    水平居中 1.margin:0 auto方法 wrapper相对屏幕居中 <div class="wrapper"></div> body{ width: 100%; } .wrapper{ margin: 0 auto; width: 120px; height: 120px; background-color: purple; } ...
  • CSS实现垂直水平居中

    千次阅读 2018-06-11 16:45:48
    前言 面试中常常被问到,如何使用css实现一个元素的垂直水平方向上居中,特别是笔试题的时候,这道题目的出现频率...这种情况就比较容易了,直接设置容器的text-align就可以实现内容元素的水平居中,设置垂直居中...
  • 水平居中 行内元素 首先看它的父元素是不是块级元素,如果是,则直接给父元素设置text-align: center; <style> #father { width: 500px; height: 300px; background-color: skyblue; text-align: ...
  • 利用 text-align: center 可以实现在块级元素内部的内联元素水平居中。 <div class="center-text"> <p>我是内联元素</p> </div> .center-text { text-align: center; } 1.2 ...
  • css实现居中 1.水平居中 div { ... width:100px//设置宽度固定 ...2.利用绝对定位实现水平垂直居中: position: absolute; left: 0; right: 0; bottom: 0; top: 0; margin: auto

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 56,204
精华内容 22,481
关键字:

css实现水平垂直居中