垂直居中_垂直居中对齐 - CSDN
精华内容
参与话题
  • CSS水平垂直居中常见方法总结

    万次阅读 多人点赞 2017-12-02 20:19:13
    css元素水平垂直居中

    说明:本篇文章只是总结一些方法,例子用到的各个元素属性不做解释,详情请看MDN文档,非常的详尽,例子在chrome浏览器下完全好使,IE这个渣渣
    附上链接:https://developer.mozilla.org/zh-CN/
    本文出现的错误,请大佬们及时指正,人非圣贤孰能无过,如有更好的方法,也请留言,我及时添加,哈哈!

    1、元素水平居中

    当然最好使的是:

    margin: 0 auto;

    居中不好使的原因:
    1、元素没有设置宽度,没有宽度怎么居中嘛!
    2、设置了宽度依然不好使,你设置的是行内元素吧,行内元素和块元素的区别以及如何将行内元素转换为块元素请看我的另一篇文章!
    示例 1:

    <div class="box">
        <div class="content">
            哇!居中了
        </div>
    </div>
    
    <style type="text/css">
    .box {
        background-color: #FF8C00;
        width: 300px;
        height: 300px;
        margin: 0 auto;
    }
    .content {
        background-color: #F00;
        width: 100px;
        height: 100px;
        line-height: 100px;//文字在块内垂直居中
        text-align: center;//文字居中
        margin: 0 auto;
    }
    </style>

    示例1

    2、元素水平垂直居中

    方案1:position 元素已知宽度
    父元素设置为:position: relative;
    子元素设置为:position: absolute;
    距上50%,据左50%,然后减去元素自身宽度的距离就可以实现
    示例 2:

    <div class="box">
        <div class="content">
        </div>
    </div>
    
    .box {
        background-color: #FF8C00;
        width: 300px;
        height: 300px;
        position: relative;
    }
    .content {
        background-color: #F00;
        width: 100px;
        height: 100px;
        position: absolute;
        left: 50%;
        top: 50%;
        margin: -50px 0 0 -50px;
    }

    示例2

    方案2:position transform 元素未知宽度
    如果元素未知宽度,只需将上面例子中的margin: -50px 0 0 -50px;替换为:transform: translate(-50%,-50%);
    效果如上!
    示例 3:

    <div class="box">
        <div class="content">
        </div>
    </div>
    
    .box {
        background-color: #FF8C00;
        width: 300px;
        height: 300px;
        position: relative;
    }
    .content {
        background-color: #F00;
        width: 100px;
        height: 100px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
    }

    示例3

    方案3:flex布局
    示例 4:

    <div class="box">
        <div class="content">
        </div>
    </div>
    
    .box {
        background-color: #FF8C00;
        width: 300px;
        height: 300px;
        display: flex;//flex布局
        justify-content: center;//使子项目水平居中
        align-items: center;//使子项目垂直居中
    }
    .content {
        background-color: #F00;
        width: 100px;
        height: 100px;
    }

    示例4
    方案4:table-cell布局
    示例 5:
    因为table-cell相当与表格的td,td为行内元素,无法设置宽和高,所以嵌套一层,嵌套一层必须设置display: inline-block;td的背景覆盖了橘黄色,不推荐使用

    <div class="box">
        <div class="content">
            <div class="inner">
            </div>
        </div>
    </div>
    
    .box {
        background-color: #FF8C00;//橘黄色
        width: 300px;
        height: 300px;
        display: table;
    }
    .content {
        background-color: #F00;//红色
        display: table-cell;
        vertical-align: middle;//使子元素垂直居中
        text-align: center;//使子元素水平居中
    }
    .inner {
        background-color: #000;//黑色
        display: inline-block;
        width: 20%;
        height: 20%;
    }

    示例5

    展开全文
  • CSS 垂直居中

    千次阅读 2018-08-30 15:08:00
    前言 被这个问题折磨很久了,一直没有系统的整理,今天就系统的整理一下比较常用的,以后回顾的时候也可以参照 1. line-height 适用场景:单行文字,下拉框,按钮等 原理:将单行文字设置行高以后,文字会位于...

    前言

    被这个问题折磨很久了,一直没有系统的整理,今天就系统的整理一下比较常用的,以后回顾的时候也可以参照

    1. line-height

    适用场景:单行文字,下拉框,按钮等

    原理:将单行文字设置行高以后,文字会位于行高的中间位置。也就是需要将元素的 line-height 设置成和高度一样。

    示例如下

        <style>
            .content{
              width: 400px;
              background: #ccc;
              line-height:100px; /* 垂直居中 */
              text-align: center; /* 水平居中 */
            }
        </style>
        <div class="content">我居中了</div>

    2. line-heigh + inline-block

    既然单行可以做到垂直居中,那么多行肯定也是可以的

    适用场景:多对象的垂直居中

    原理:在要居中的对象外面包裹一层,将它们整个的 display 设置为 inline-block 模仿行内元素。但是包裹对象的内部还是以块级元素的形式存在。

    示例如下

        <style>
        .main{
            width: 400px;
            border: 1px solid red; 
            line-height: 200px;
            text-align: center; /* 水平居中 */
        }
        .wrapper{
            line-height: 1;
            display: inline-block;  
        }
        </style>
    
        <div class="main">
            <div class="wrapper">
                <div>我居中了</div>
                <div>我也是</div>
            </div>      
        </div>

    3. absolute + margin 负值

    这个应该是最常见的居中方式了

    适用场景:多行文字的垂直居中,已知宽高

    原理:利用绝对定位 top 和 left 50%,然后减去元素本身内容区的一半,就可以实现居中

    示例如下

        <style>
        .main{
            border: solid 1px red;
            width: 400px;
            height: 400px;
            position: relative
        }
        .content{
            height: 200px;
            width: 200px;
            background-color: yellow;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -100px;
            margin-top: -100px;
        }
        </style>
            <div class="main">
            <div class="content">
            </div>
        </div>

    4. absolute + margin:auto

    适用场景:多行文字垂直居中

    原理:这种方法跟上面的有些类似,但是这里是通过 margin:auto 和 top,left,right,bottom 都设置为 0 实现居中。不过这里得确定内部元素的高度,可以用百分比,比较适合移动端。

    示例如下

        <style>
        .main{
            border: solid 1px red;
            width: 400px;
            height: 400px;
            position: relative;
        }
        .content{
            position: absolute;
            background-color: yellow;
            width: 200px;
            height: 100px;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
        }
        </style>
        <div class="main">
            <div class="content"></div>
        </div>
    


    这里需要注意设置父元素的 position 必须是 relative 或者 absolute 或者 fixed

    5. Flex + align-items

    适用场景:多对象垂直居中

    原理:Flex 布局 align-items 垂直居中,justify-content 水平居中

    示例如下

        <style>
        .main{
            border: solid 1px red;
            width: 400px;
            height: 400px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        </style>
        <div class="main">
            <div>我居中了</div>
            <div>我也居中了</div>
        </div>
    

    6. display:table-cell

    适用场景:多行文字的垂直居中技巧

    原理:利用 display 将 div 设置成表格的单元格,然后利用 veritical-align 实现垂直居中

    示例如下

        <style>
        .main{
            border: solid 1px red;
            width: 400px;
            height: 400px;
            display: table-cell;
            vertical-align: middle;
            text-align: center;
        }
        </style>
        <div class="main">
            <div>我居中了</div>
        </div>

    7. translate + absolute

    这种方法和方法三类似

    适用场景:多行文字垂直居中

    原理:利用绝对定位 top 和 left 50%,然后减去元素本身内容区的一半,就可以实现居中

    示例如下

        <style>
        .main{
            border: solid 1px red;
            width: 400px;
            height: 400px;
            position: fixed;
        }
        .content{
            position: absolute;
            background-color: yellow;
            width: 200px;
            height: 100px;
            transform: translate(-50%, -50%);
            top:50%;
            left: 50%;
        }
        </style>
        <div class="main">
            <div class="content"></div>
        </div>

    8. :before + inline-block

    适用场景:多对象垂直居中

    原理:利用 :before 伪类元素设定为 100% 高的 inline-block,再搭配上将需要居中的子元素同样设置成 inline-block 性质后,就能使用 vertical-align:middle 来达到垂直居中的目的了,该方法需要注意去掉 inline-block 元素之间的 4-5px 小空隙。

    示例如下

        <style>
        .main{
            border: solid 1px red;
            width: 400px;
            height: 400px;
            text-align: center;
        }
        .main::before{
            content: "";
            height: 100%;
            display: inline-block;
            vertical-align: middle;
            width: 0;
        }
        .content{
            background-color: yellow;
            width: 200px;
            height: 100px;
            display: inline-block;
            vertical-align: middle;
        }
        </style>
        <div class="main">
            <div class="content"></div>
        </div>

    参考文章

    CSS垂直居中技巧,我只会23个,你会几个?

    展开全文
  • 使用绝对定位加负外边距,具体的代码为 <div class="box"> <div class="child"> </div> </div> .box { width: 300px; height: 300px;... position:...
    • 使用绝对定位加负外边距,具体的代码为
    <div class="box">
       		<div class="child">
       		</div>
    </div>
    
    .box {
       			width: 300px;
       			height: 300px;
       			background: lightblue;
       			position: relative;
       		}
       		
       		.child {
       			width: 100px;
       			/*				这里的width和height可以使用百分比,那么margin也应该设置为百分比,并且满足为自身高度的一半*/
       			height: 100px;
       			position: absolute;
       			background: lightcoral;
       			margin: -50px 0 0 0;
       			/*margin为自身高度的一半*/
       			top: 50%;
       		}
    

    这种方式的兼容性比较高,可以不用知道父元素的宽高,但是需要知道被居中元素的高度,因为margin需要设置为自身高度的一半

    • 使用绝对定位加transform,具体的代码如下
    <div class="box1">
       		<div class="child1"></div>
       	</div>
    .box1 {
       			width: 300px;
       			height: 300px;
       			background: lightblue;
       			position: relative;
       		}
       		
       		.child1 {
       			background: orange;
       			position: absolute;
       			top: 50%;
       			transform: translate(0, -50%);
       			width: 200px;
       			height: 200px;
       		}
    

    这种方式的好处是既不用知道父元素的尺寸,也不用知道被居中元素的尺寸,因为transform中的translate偏移的百分比就是相对于元素本身的尺寸而言的

    • 使用padding
    <div class="box2">
       	 	<div class="child2">
       	 		
       	 	</div>
       	</div>
    .box2 {
       			width: 300px;
       			background: lightblue;
       			padding: 100px 0;
       		}
       		
       		.child2 {
       			width: 200px;
       			height: 200px;
       			background: orange;
       		}
    

    这种办法需要知道父元素和子元素的宽高,因为这种方法的实现方式是父元素的高=内上边距+子元素的高+内下边距的高

    • 使用flex布局(align-items)
    <div class="box3">
       		<div class="child3"></div>
    </div>
       	
    .box3 {
       			width: 300px;
       			height: 300px;
       			background: lightblue;
       			display: flex;
       			align-items: center;
       		}
       		
       		.child3 {
       			width: 100px;
       			height: 100px;
       			background: orange;
       		}
    
    • 使用flex布局(flex-direction+justify-content)
    <div class="box4">
       		<div class="child4"></div>
    </div>
    
    .box4 {
       			width: 300px;
       			height: 300px;
       			background: lightblue;
       			display: flex;
       			flex-direction: column;
       			justify-content: center;
       		}
       		
       		.child4 {
       			width: 300px;
       			height: 100px;
       			background: orange;
       		}
    
    • 让文字垂直居中
    <div class="box5">
       		<div class="child5">vertial align</div>
    </div>
    
    .box5{
       			width: 300px;
       			height: 300px;
       			background: lightblue;
       			display:table;
       		}
       		
       		.child5{
       			display:table-cell;
       			vertical-align: middle;
       			background: orange;
       		}
    
    展开全文
  • div 垂直居中的六种方法

    万次阅读 2017-11-23 15:46:36
    利用CSS进行元素的水平...本文收集了六种利用css进行元素的垂直居中的方法,每一种适用于不同的情况,在实际的使用过程中选择某一种方法即可。 Line-Height Method 试用:单行文本垂直居中,demo 代码:

    利用CSS进行元素的水平居中,比较简单,行级元素设置其父元素的text-align center,块级元素设置其本身的left 和 right margins为auto即可。本文收集了六种利用css进行元素的垂直居中的方法,每一种适用于不同的情况,在实际的使用过程中选择某一种方法即可。

    Line-Height Method

    line height demo
    试用:单行文本垂直居中,demo

    代码:

    html

    1
    2
    3
    
    <div id="parent">
    <div id="child">Text here</div>
    </div>

    css

    1
    2
    3
    
    #child {
    line-height: 200px;
    }

    垂直居中一张图片,代码如下

    html

    1
    2
    3
    
    <div id="parent">
    <img src="image.png" alt="" />
    </div>

    css

    1
    2
    3
    4
    5
    6
    
    #parent {
    line-height: 200px;
    }
    #parent img {
    vertical-align: middle;
    }

    CSS Table Method

    table cell demo

    适用:通用,demo

    代码:

    html

    1
    2
    3
    
    <div id="parent">
    <div id="child">Content here</div>
    </div>

    css

    1
    2
    3
    4
    5
    
    #parent {display: table;}
    #child {
    display: table-cell;
    vertical-align: middle;
    }

    低版本 IE fix bug:

    1
    2
    3
    
    #child {
    display: inline-block;
    }

    Absolute Positioning and Negative Margin

    absolute positioning and negative margin demo

    适用:块级元素,demo

    代码:

    html

    1
    2
    3
    
    <div id="parent">
    <div id="child">Content here</div>
    </div>

    css

    1
    2
    3
    4
    5
    6
    7
    8
    9
    
    #parent {position: relative;}
    #child {
    position: absolute;
    top: 50%;
    left: 50%;
    height: 30%;
    width: 50%;
    margin: -15% 0 0 -25%;
    }

    Absolute Positioning and Stretching

    absolute positioning and vertical stretching demo

    适用:通用,但在IE版本低于7时不能正常工作,demo

    代码:

    html

    1
    2
    3
    
    <div id="parent">
    <div id="child">Content here</div>
    </div>

    css

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    
    #parent {position: relative;}
    #child {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 50%;
    height: 30%;
    margin: auto;
    }

    Equal Top and Bottom Padding

    vertical centering with padding demo

    适用:通用,demo

    代码:

    html

    1
    2
    3
    
    <div id="parent">
    <div id="child">Content here</div>
    </div>

    css

    1
    2
    3
    4
    5
    6
    
    #parent {
    padding: 5% 0;
    }
    #child {
    padding: 10% 0;
    }

    Floater Div

    vertical centering with floater div demo

    适用:通用,demo

    代码:

    html

    1
    2
    3
    4
    
    <div id="parent">
    <div id="floater"></div>
    <div id="child">Content here</div>
    </div>

    css

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    
    #parent {height: 250px;}
    #floater {
    float: left;
    height: 50%;
    width: 100%;
    margin-bottom: -50px;
    }
    #child {
    clear: both;
    height: 100px;
    }
    展开全文
  • 【让div在屏幕中居中(水平居中+垂直居中)的几种方法】 水平居中方法: 1.inline,inline-block元素的水平居中,在父级块级元素中设置text-align:center; 2.确定宽度的块级元素水平居中方法 margin:0 auto...
  • CSS实现垂直居中的几种方法

    千次阅读 2019-06-03 10:03:00
    垂直居中是布局中十分常见的效果之一,为实现良好的兼容性,PC端实现垂直居中的方法一般是通过绝对定位,table-cell,负边距等方法。有了css3,针对移动端的垂直居中就更加多样化。 方法1:table-cell html结构: ...
  • //使子项目垂直居中 &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html lang=&quot;en&quot;&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF
  • CSS 元素垂直居中的 6种方法

    万次阅读 多人点赞 2018-01-17 20:40:13
    转自:http://blog.zhourunsheng.com/2012/03/css-%E5%85%83%E7%B4%A0%E5%9E%82%E7%9B%B4%E5%B1%85%E4%B8%AD%E7%9A%84-6%E7%A7%8D%E6%96%B9%E6%B3%95/利用CSS进行元素的水平居中,比较简单,行级元素设置其父元素的...
  • 垂直水平居中的几种实现方式

    万次阅读 2018-08-13 10:46:46
    一、固定宽高: 1、margin 根据已知的宽高写死,不推荐 2、定位 + margin-top + margin-left .box-container{ position: relative; width: 300px; height: 300px; } .box-container .box { width:...
  • 未知宽高元素的垂直水平居中 第一种方法:组合使用display:table-cell和vertical-align、text-align,使父元素内的所有行内元素水平垂直居中(内部div设置display:inline-block即可)这在子元素不确定宽度和高度...
  • 我们经常用margin:0 auto来实现水平居中,而一直认为margin:auto不能实现垂直居中……实际上,实现垂直居中仅需要声明元素高度和下面的CSS: .Absolute-Center { margin: auto; position: absolute; top: 0; left...
  • 当然也可以用下面的方法下面说两种在屏幕正中(水平居中+垂直居中)的方法 放上示范的html代码:&amp;lt;body&amp;gt; &amp;lt;div class=&amp;quot;main&amp;quot;&amp;gt;
  • css 文本和div垂直居中方法汇总

    万次阅读 多人点赞 2016-07-04 14:10:01
    本文总结了垂直居中的各种方法,包括单行文本垂直居中、多行文本垂直居中以及div垂直居中,列出了多种情况对应的方法。读者可以根据实际需要选择合适的方法。
  • 实现div里的img图片水平垂直居中

    万次阅读 多人点赞 2020-01-16 10:40:37
    body结构<body> <div> <...将display设置成table-cell,然后水平居中设置text-align为center,垂直居中设置vertical-align为middle。<style type="text/css"> *{
  • 网上有很多关于Flex的教程,对于Flex的叫法也不一,有的叫Flexbox,有的叫Flex,其实这两种叫法都没有错,只是Flexbox旧一点,而Flex是刚出来不久的东西而已,为了方便...不过很多时候要实现垂直居中,还是比较麻烦的。
  • 前言:在网页布局中,经常遇到需要使元素居中对齐的时候,居中对齐的方式有:水平居中、垂直居中和水平垂直居中。这次,借此回顾总结一下,并在此记录下相关内容。 一、水平居中:  (1)行内元素的水平居中  ...
  • CSS水平居中+垂直居中+水平/垂直居中的方法总结

    万次阅读 多人点赞 2018-09-02 19:48:43
    垂直居中 单行的行内元素 多行的行内元素  块级元素 水平垂直居中 已知高度和宽度的元素 未知高度和宽度的元素 方案一:使用定位属性 方案二:使用flex布局实现 水平居中  行内元素 首先看它的父元....
  • div内图片和文字水平垂直居中

    万次阅读 2017-11-29 17:32:36
    大小不固定的图片、多行文字的水平垂直居中 本文综述 想必写css的都知道如何让单行文字在高度固定的容器内垂直居中,但是您知道或者想过让行数不固定的文字在高度固定的容器内垂直居中呢?本文将会告诉你...
  • 居中总体来说可以分为水平居中还有垂直居中,顾名思义,定义这里就不解释了!首先,我们来看下垂直居中:(1)、如果是单行文本,则可以设置的line-height的数值,让其等于父级元素的高度!&lt;!DOCTYPE ...
  • 本教程为thinkcss教大家三种让img元素图片在盒子内垂直居中的方法教程,根据代码与文章教程理解掌握并加以使用。 一、使用flex实现垂直居中 利用css flex实现垂直居中。flex可能不是实现垂直居中最好的选择,因为...
1 2 3 4 5 ... 20
收藏数 90,135
精华内容 36,054
关键字:

垂直居中