精华内容
下载资源
问答
  • 弹性盒子垂直水平居中的9种方法

    千次阅读 2021-01-12 01:51:39
    方法一: 父元素 { display: grid; align-items: center; justify-items: center; } 方法二: 父元素 { display: grid; align-items: center; justify-content: center; } 方法三: ...justify-con

    方法一:

    父元素 {
    display: grid;
    align-items: center;
    justify-items: center;
    }
    

    方法二:

    父元素 {
    display: grid;
    align-items: center;
    justify-content: center;
    }
    

    方法三:

    父元素{
    display: grid;
    }
    子元素 {
    margin: auto;
    }
    

    方法四:

    父元素 {
    display: flex;
    align-items: center;
    justify-content: center;
    }
    

    方法五:

    父元素{
    display: flex;
    }
    子元素 {
    margin: auto;
    }
    

    方法六:

    父元素 {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    }
    子元素 {
    display: inline-block;
    }
    

    方法七:

    父元素 {
    position: relative;
    }
    子元素 {
    position: absolute;
    left: 50%;
    top: 50%;
    transfrom: translate(-50%, -50%);
    margin: 0;
    }
    

    方法八:

    父元素 {
    height: xx px;
    text-align: center;
    }
    父元素::after {
    content: '';
    line-height:xx px;
    }
    子元素 {
    display: inline-block;
    }
    

    方法九:

    .box {
    position: relative;
    }
    p {
    /*必须要设置宽高*/
    width: 100px;
    height: 40px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    }
    
    展开全文
  • 一个盒子垂直水平居中的几种方法总结 效果展示: HTML代码: <div id="container"> <div id="box"></div> </div> css基本样式: #container { width: 100%; height: 600px; border: 1...

    一个盒子垂直水平居中的几种方法总结

    效果展示:
    垂直水平居中效果展示图

    HTML代码:

    <div id="container">
        <div id="box"></div>
    </div>
    

    css基本样式:

    #container {
         width: 100%;
         height: 600px;
         border: 1px solid black;
     }
     #box {
         width: 100px;
         height: 100px;
         background: red;
     }
    

    方法一:定位 absolute + 负margin

    #container {
         width: 100%;
         height: 600px;
         border: 1px solid black;
         
         position: relative;
     }
     #box {
         width: 100px;
         height: 100px;
         background: red;
         
         position:absolute;
            top: 50%;
            left: 50%;
            margin-left: -50px;  /* 左偏移量取其元素宽度的一半的负值 */
            margin-top: -50px;    /* 上偏移量取其元素高度的一半的负值 */
     }
    

      解释:为父元素设置了相对定位之后,子元素的绝对定位就是相对于父元素盒子的左上顶点,所以定位之后我们需要回退盒子一半的距离。

    方法二:定位absolute + margin auto

    #container {
         width: 100%;
         height: 600px;
         border: 1px solid black;
     
         position: relative;
     }
    #box {
        width: 100px;
        height: 100px;
        background: red;
        
        position:absolute;
        top:0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
    }
    

    方法三:table-cell

     #container{
        width:600px;
        height: 600px;
        border: 1px solid black;
        
        display:table-cell;
        vertical-align: middle;
        text-align: center;
    }
    #box{
        width: 100px;
        height: 100px;
        background: red;
        
        display: inline-block;
    }
    

    注意:不能对display:table-cell的div使用百分比设置宽度和高度;

    方法四:弹性盒子display: flex

    #container{
        width:600px;
        height: 600px;
        border: 1px solid black;
        
        display: flex;
        justify-content: center;
        align-items: center;
    }
    #box{
        width: 100px;
        height: 100px;
        background: red;
    }
    

    方法五:利用transform

    #container{
        width:600px;
        height: 600px;
        border: 1px solid black;
        
        position: relative;
    }
    #box{
        width: 100px;
        height: 100px;
        background: red;
        
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
    }
    

    方法六:利用calc计算

    #container{
        width:600px;
        height: 600px;
        border: 1px solid black;
        
        position: relative;
    }
    #box{
        width: 100px;
        height: 100px;
        background: red;
        
        position: absolute;
        top: calc(250px);
        left: calc(100%-100px);
    }
    

    注意: top = 父元素的高度-子元素的高度, left = 父元素的宽度-子元素的宽度 ;

    方法七:网格布局

     #container{
         width:600px;
         height: 600px;
         border: 1px solid black;
         
         display:grid;
     }
     #box{
         width: 100px;
         height: 100px;
         background: red;
        
         align-self: center;
         justify-self: center;
     }
    

      关于网格布局的更多知识详解可参考阮一峰老师的讲解,链接:http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html

    方法八:计算父盒子与子盒子的空间距离

     #container{
         width:600px;
         height: 600px;
         border: 1px solid black;
     }
     #box{
         width: 100px;
         height: 100px;
         background: red;
         
         margin-left:250px;
         margin-top: 250px;
     }
    

    计算方法:父盒子高度或者宽度的一半减去子盒子高度或者宽的的一半。这个要根据自己设置的实际宽高进行计算;

      以上就是我关于一个盒子在垂直水平位置居中的几种方法的一些见解和总结,关于文本的居中方法在这里就不做赘述,感兴趣的可以参考我的另一篇博客,如有不足,欢迎指正。
    单行文本+多行文本垂直水平居中的设置方法:https://blog.csdn.net/qq_43692768/article/details/109412944

    展开全文
  • 弹性盒子
    1. margin :auto 方法
      ==================

      给 要居中的元素 设置 margin :auto
      绝对定位 position :absolute;
      top:0;bottom:0;left: 0px;right: 0px;

      父元素要设置相对定位

    2. 负 margin 的方法


    绝对定位 position :absolute;
    top:50%; left: 50%px;
    margin-top:-高度的一般;
    margin-left:负宽度的一半

    1. display :table-cell 法

    这个方法主要对父元素设置的比较多
    父元素:  display :table-cell;
    	         vertical-align:middle;
    	         text-align:center;
    要居中的元素:   
    			vertical-align:middle;
    

    4.弹性盒子法 display :flex;

    (1)这个对父元素设置css就可以了
    display :flex;
    display:-webkit-flex;
    align-items:center;
    -webkit-align-items:center;
    justify-content:center ;
    (2)父元素设置display :flex;子元素设置margin:auto
    父元素 {
    display: -webkit-flex;
    display: flex;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
    }

    要居中的元素 {
    background-color: cornflowerblue;
    width: 75px;
    height: 75px;
    margin: auto;
    }

    弹性盒子

    弹性盒子设置
    display: -webkit-flex;
    display: flex;

    如果父元素设置了display 属性的值为 flex ,如果子元素未设置宽度,那么所有子元素的宽度都是一样的宽度

    1.给body 设置 direction: rtl;
    direction 属性为 rtl (right-to-left),弹性子元素的排列方式也会改变,页面布局也跟着改变

    2.flex-direction 顺序指定了弹性子元素在父容器中的位置。
    flex-direction: row | row-reverse | column | column-reverse
    flex-direction的值有:
    row:横向从左到右排列(左对齐),默认的排列方式。
    row-reverse:反转横向排列(右对齐,从后往前排,最后一项排在最前面。
    column:纵向排列。
    column-reverse:反转纵向排列,从后往前排,最后一项排在最上面。
    #flex

    flex布局

    一、flex和align-items

    #box {
    width: 300px;
    height: 300px;
    background: #ddd;
    display: flex;
    align-items: center;
    }

    二、flex、flex-direction: column和justify-content: center;

    #box {
    width: 300px;
    height: 300px;
    background: #ddd;
    display: flex;
    flex-direction: column;
    justify-content: center;
    }
    #child {
    width: 300px;
    height: 100px;
    background: #08BC67;
    line-height: 100px;
    }

    flex-direction: 主轴的排列方向(默认横轴 flex-direction: row)

    justify-content: 主轴的对齐方式 (默认横轴对齐方式–水平)

    align-items: 交叉轴的对齐方式(默认纵轴—垂直)

    展开全文
  • 弹性盒子flex,水平垂直居中

    千次阅读 2019-12-24 18:58:18
    https://blog.csdn.net/hwhsong/article/details/83896404
    展开全文
  • 旧弹性盒水平垂直居中参考:http://www.cnblogs.com/ooo0/p/6617028.html 新旧弹性盒样式参考:http://www.cnblogs.com/ooo0/p/7562906.html display: flex;弹性父元素属性 align-items 设置或检索弹性盒子元素...
  • <!... <... <...05盒子居中写法</title> <style type="text/css"> * { margin: 0; padding: 0; } .box1 { width: 500px; height: 500px; background
  • CSS基础:让一个盒子垂直水平居中的几种方法方法一:通过position+transform实现方法二:通过display: flex;(弹性盒子)实现 方法一:通过position+transform实现 // 首先准备一个盒子 <div class="box"><...
  • css的10种盒子水平垂直居中方法

    千次阅读 2020-07-16 23:13:44
    <body>...第一种:弹性布局(flex布局):父级对子元素进行垂直居中,居中属性只需要定义在父元素中 <style> .wrap{//【基础设置】父元素:宽高各600px,紫色边框 width: 600px; height: 600p
  • 一、绝对定位 + margin,让明确宽高的盒子水平垂直居中于窗口 <!DOCTYPE> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=...
  • 使用场景多为页面弹窗,需要垂直水平居中。 · 在未知div的宽度情况下,建议使用方法一和方法二 方法一 div{position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);} 方法二 div{position...
  • <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .out { width: 500px; height: 300px;......
  • Css3 弹性盒子垂直居中

    万次阅读 2015-11-11 10:22:02
    之前在做一个项目的时候,用到弹性盒子垂直居中,鉴于宽度固定,高度不定的缘故,加上里面用的img的src是动态替换的,客户给的图片高度不一致,导致垂直居中的时候,高度较小的图片把整个img的高度固定死了,而致使...
  • 未知宽高盒子水平垂直居中方法

    千次阅读 2019-07-27 13:34:30
    利用弹性盒子 代码: .wrap{ display: flex; justify-content: center; align-items: center; height: 400px; width: 400px; border: 1px solid black } .child{ background-color: cornflowerblue...
  • 盒子在窗口垂直水平居中有七种方法:第一种:利用负的margin来进行居中,需要知道固定宽高,限制比较大。body&gt;div:nth-of-type(1){ width:400px; height:400px; background:#ff0; position:relative; margin-...
  • 1、 .father { display: table-cell; text-align: center; vertical-align: middle; width:500px;height: 500px; } .child { display: inline-block; } 2、 ....containe...
  • margin-left:-(子盒子宽的一半); margin-top:-(子盒子高的一半); } 缺点:需要知道子元素的宽高 优点:比较好理解,兼容性好 第二种:也是通过绝对定位的方式 absolute + margin auto 实现操作: 父:{ positio
  • 使用弹性盒布局-flex,巧妙的实现图片垂直水平居中 效果图 示例代码 <div class="cp bgcolor"> <img class="img01" src="../assets/images/coop/yl.png" alt="图" /> </div> .cp { ...
  • 元素在盒子垂直水平居中? 方案一:定位 这里则就需要父容器设置为position:relative;子容器设置为positive:absolute; 设置了定位的元素就支持了上下左右(top、bottom、left、right)四个坐标。关于定位下...
  • 绝对定位方式-子盒子必须有宽高 ...margin-left、margin-top 把盒子移动到居中的位置 <style type="text/css"> *{ padding: 0; margin: 0; } .wrapper{ width: 800px; height: 800px; backgroun
  • 在这介绍一下css3的弹性盒子内容,对该属性了解的可以直接下拉看红色分割线下的水平垂直居中的方法: 弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。 弹性容器通过设置 di
  • 代码如下(示例): display:flex; align-items:center;//使内部元素垂直居中 justify-content:center;//使内部元素水平居中

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 7,298
精华内容 2,919
关键字:

弹性盒子垂直水平居中