精华内容
下载资源
问答
  • css盒子居中对齐
    千次阅读
    2021-06-14 04:03:33

    css怎么让盒子居中对齐?下面本篇文章就来给大家使用CSS让盒子居中对齐的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

    5deb13f76ab7d662.jpg

    一、盒子垂直居中的方法

    1、先让盒子的上下边缘和父盒子的水平中心线重叠,,然后再让子盒子往回移动自身一半的距离

    /* 结构 */

    /* 通过 transform 属性来移动*/

    .father {

    width: 500px;

    height: 500px;

    background-color: skyblue;

    border: 1px solid #000;

    margin: 0 auto;

    }

    .son {

    width: 200px;

    height: 200px;

    background-color: pink;

    border: 1px solid #000;

    margin-top: 50%; /* 向下移动父盒子的一半 */

    transform: translateY(-50%); /* 向上移动自身盒子的一半 */

    }

    /* 通过 定位来移动*/

    .father {

    width: 500px;

    height: 500px;

    background-color: skyblue;

    border: 1px solid #000;

    margin: 0 auto;

    position: relative;

    }

    .son {

    width: 200px;

    height: 200px;

    background-color: pink;

    border: 1px solid #000;

    position: absolute;

    top: 50%; /* 先向下移动父盒子的一半 */

    margin-top: -100px; /* 再向上移动自身盒子的一半 */

    }

    2、使用表格的 vertical-align :middle 属性来实现盒子垂直居中.father {

    width: 500px;

    height: 500px;

    background-color: skyblue;

    border: 1px solid #000;

    display: table-cell; /* 显示形式为表格 */

    vertical-align: middle; /* 里面内容为居中对齐 */

    }

    .son {

    width: 200px;

    height: 200px;

    background-color: pink;

    border: 1px solid #000;

    }

    3、知道父盒子的高度,可以使用 margin 计算盒子的上下边距,来使盒子居中.father {

    width: 500px;

    height: 500px;

    background-color: skyblue;

    border: 1px solid #000;

    margin: 50px auto;

    }

    .son {

    width: 200px;

    height: 200px;

    background-color: pink;

    border: 1px solid #000;

    margin-top: 149px; /* 根据父盒子的高度指定 margin-top 即可 */

    }

    二、盒子水平居中的方法

    1、使用 margin: 0 auto;.father {

    width: 500px;

    height: 500px;

    background-color: skyblue;

    border: 1px solid #000;

    margin: 50px auto;

    }

    .son {

    width: 200px;

    height: 200px;

    background-color: pink;

    border: 1px solid #000;

    margin: 0 auto; /* 让盒子左右自动适应,想当于 left:auto; right:auto */

    }

    2、通过计算 margin 左右边距来实现居中.father {

    width: 500px;

    height: 500px;

    background-color: skyblue;

    border: 1px solid #000;

    margin: 50px auto;

    }

    .son {

    width: 200px;

    height: 200px;

    background-color: pink;

    border: 1px solid #000;

    margin-left: 149px; /*父盒子的定宽的,指定 margin-left 即可*/

    }

    3、先让盒子左右边缘和父盒子垂直的中心线垂直,然后把子盒子往回移动自身宽度的一半/* 通过 transform 实现*/

    .father {

    width: 500px;

    height: 500px;

    background-color: skyblue;

    border: 1px solid #000;

    margin: 50px auto;

    }

    .son {

    width: 200px;

    height: 200px;

    background-color: pink;

    border: 1px solid #000;

    margin-left: 50%; /*先移动父盒子的一半 */

    transform: translateX(-50%); /*再移动自身盒子一半 */

    }

    /*通过 定位实现*/

    .father {

    width: 500px;

    height: 500px;

    background-color: skyblue;

    border: 1px solid #000;

    margin: 50px auto;

    position: relative;

    }

    .son {

    width: 200px;

    height: 200px;

    background-color: pink;

    border: 1px solid #000;

    position: absolute;

    left: 50%; /* 向右移动父盒子一半*/

    margin-left: -100px; /* 向左移动自身盒子一半*/

    /* transform: translateX(-50%); */ /*向左移动自身盒子一半*/

    }

    4、把盒子转成 行内块,然后用 text-align 属性使盒子水平居中.father {

    width: 500px;

    height: 500px;

    background-color: skyblue;

    border: 1px solid #000;

    margin: 50px auto;

    text-align: center; /*让父盒子设置水平居中*/

    }

    .son {

    width: 200px;

    height: 200px;

    background-color: pink;

    border: 1px solid #000;

    display: inline-block; /* 让子盒子显示为行内块模式*/

    }

    更多CSS相关知识,可访问 CSS教程 !!

    更多相关内容
  • CSS实现盒子居中对齐的七种方法

    千次阅读 2022-02-01 17:21:56
    CSS实现盒子居中对齐的七种方法:行内元素,行内块元素,块级元素的垂直居中对齐

    初始化两个盒子

      <style>
        .parent {
          width: 500px;
          height: 500px;
          background-color: skyblue;
        }
        .child {
          width: 200px;
          height: 200px;
          background-color: pink;
        }
      </style>
    
    <body>
      <div class='parent'>
        <div class='child'></div>
      </div>
    </body>
    

    方法1 定位 子绝父相

    子绝父相

    .parent {
      position: relative;
    }
    
    .child {
      position: absolute;
    }
    

    方法1.1 margin 纯计算(不推荐)

    父盒子宽度的一半减去子盒子宽度的一半 500/2 - 200/2 = 150
    父盒子高度的一半减去子盒子高度的一半 500/2 - 200/2 = 150

    .child {
      margin-top:150px;
      margin-left:150px;
    }
    

    方法1.2 margin设置为auto

    .child {
      top: 0px;
      left: 0px;
      bottom: 0px;
      right: 0px;
      margin: auto;
    }
    

    方法1.3 transform 

    .child {
      position: absolute;
      top: 50%;
      left: 50%
    }
    

    再让子盒子往“回”移动自己宽高的一半

    .child {
      transform: translate(-50%, -50%);
    }
    

     

    方法2 flex(推荐)

    将父盒子设置成弹性盒容器
    让子元素水平居中,垂直居中

    .parent {
      display: flex;
      justify-content: center;
      align-items: center;
    }
    

     

    方法3 table-cell 

    .parent {
        display: table-cell;
        vertical-align: middle;
    }
    

    设置子盒子水平居中

    .child {
      margin: 0 auto;
    }
    

     

    方法4 inline-block

    子盒子设置成行内块

    .child {
      display: inline-block;
    }
    

     给父盒子添加

    * text-align: center; 只对行内元素和行内块元素有用

    .parent {
      text-align: center;
      line-height: 500px;
    }
    

    再给子盒子添加

    .child {
      vertical-align: middle;
    }
    

     

    方法5 JavaScript

    给盒子来个id,然后开始写js代码

      <style>
        .parent {
          width: 500px;
          height: 500px;
          background-color: skyblue;
        }
        .child {
          width: 200px;
          height: 200px;
          background-color: pink;
        }
      </style>
    
    <body>
      <div class='parent' id='parent'>
        <div class='child' id='child'></div>
      </div>
      <script>
        let parent = document.getElementById('parent');
        let child = document.getElementById('child');
        let parentW = parent.offsetWidth;
        let parentH = parent.offsetHeight;
        let childW = child.offsetWidth;
        let childH = child.offsetHeight;
        parent.style.position = "relative"
        child.style.position = "absolute";
        child.style.left = (parentW - childW) / 2 + 'px';
        child.style.top = (parentH - childH) / 2 + 'px';
      </script>
    </body>
    

     

    展开全文
  • 文章目录让盒子垂直居中盒子垂直居中 有一个盒子 div { width: 200px; height: 200px; background-color: pink; } 让盒子水平居中比较简单加上 margin: 0 auto; 即可 上面有缝隙,清除一下祖先元素的默认...

    日常会用到,面试也会考到~

    0. 初始化两个盒子

      <style>
        .parent {
          width: 500px;
          height: 500px;
          background-color: skyblue;
        }
        .child {
          width: 200px;
          height: 200px;
          background-color: pink;
        }
      </style>
    </head>
    
    <body>
      <div class='parent'>
        <div class='child'></div>
      </div>
    </body>
    

    在这里插入图片描述

    方法1 定位 子绝父相

    子绝父相

    .parent {
      position: relative;
    }
    
    .child {
      position: absolute;
    }
    

    方法1.1 margin 纯计算(不推荐)

    父盒子宽度的一半减去子盒子宽度的一半 500/2 - 200/2 = 150
    父盒子高度的一半减去子盒子高度的一半 500/2 - 200/2 = 150

    .child {
      margin-top:150px;
      margin-left:150px;
    }
    

    在这里插入图片描述

    方法1.2 margin

    .child {
      top: 0px;
      left: 0px;
      bottom: 0px;
      right: 0px;
      margin: auto;
    }
    

    在这里插入图片描述

    方法1.3 transform

    .child {
      position: absolute;
      top: 50%;
      left: 50%
    }
    

    在这里插入图片描述
    再让子盒子往“回”移动自己宽高的一半

    .child {
      transform: translate(-50%, -50%);
    }
    

    在这里插入图片描述

    【CSS】定位–静态定位-相对定位-绝对定位-子绝父相-固定定位-粘性定位

    方法2 flex(推荐)

    将父盒子设置成弹性盒容器
    让子元素水平居中,垂直居中

    .parent {
      display: flex;
      justify-content: center;
      align-items: center;
    }
    

    在这里插入图片描述
    【CSS】flex布局-弹性盒-伸缩盒-代替浮动

    方法3 table-cell

    .parent {
        display: table-cell;
        vertical-align: middle;
    }
    

    在这里插入图片描述
    设置子盒子水平居中

    .child {
      margin: 0 auto;
    }
    

    在这里插入图片描述

    方法4 inline-block

    子盒子设置成行内块

    .child {
      display: inline-block;
    }
    

    给父盒子添加

    .parent {
      text-align: center;
      line-height: 500px;
    }
    

    在这里插入图片描述
    再给子盒子添加

    .child {
      vertical-align: middle;
    }
    

    在这里插入图片描述

    方法5 JavaScript

    给盒子来个id

      <style>
        .parent {
          width: 500px;
          height: 500px;
          background-color: skyblue;
        }
        .child {
          width: 200px;
          height: 200px;
          background-color: pink;
        }
      </style>
    </head>
    
    <body>
      <div class='parent' id='parent'>
        <div class='child' id='child'></div>
      </div>
    </body>
    

    写js

    <body>
      <div class='parent' id='parent'>
        <div class='child' id='child'></div>
      </div>
      <script>
        let parent = document.getElementById('parent');
        let child = document.getElementById('child');
        let parentW = parent.offsetWidth;
        let parentH = parent.offsetHeight;
        let childW = child.offsetWidth;
        let childH = child.offsetHeight;
        parent.style.position = "relative"
        child.style.position = "absolute";
        child.style.left = (parentW - childW) / 2 + 'px';
        child.style.top = (parentH - childH) / 2 + 'px';
      </script>
    </body>
    

    在这里插入图片描述

    展开全文
  • CSS——居中对齐

    2021-04-24 21:53:33
    最近开始学网站设计编程了,打算写一些学习记录。这次记录的是居中对齐的方法 ...这一点css中没有直接的相关设置 比较好用的一个方法是 设置盒子高度(height) = 行高(line-height),这样盒子里的文字就可以实现...

    最近开始学网站设计编程了,打算写一些学习记录。这次记录的是居中对齐的方法

    水平居中:

    我尝试的有两种方式:

    (1)margin: auto;

    一般是块级元素 记得设置宽度和高度 

    效果图:

    (2)text-align: center; 

    一般是这句代码是给父级,效果是让其子元素居中对齐

    效果图:

     

    单行文字竖向居中对齐

    这一点css中没有直接的相关设置 比较好用的一个方法是 设置盒子高度(height) = 行高(line-height),这样盒子里的文字就可以实现竖向居中对齐

    这是效果:

     

     

    展开全文
  • 有7中方法可以实现这个要求 1、先回答最长用的方式定位 整体方案 父相自绝 <!DOCTYPE html> <html lang="en"> <head>...meta name="viewport" content="width=device-width, ini
  • CSS盒子居中的方法

    千次阅读 2021-07-06 16:54:29
    CSS盒子居中的方法 1. CSS盒子水平居中的方法 1.1 使用 margin: 0 auto; 当元素的左右外边距(margin)相等的时候,元素就处在中间位置,这可以通过将左右外边距都设为auto来实现。如果是块级元素通常还需要定义宽度...
  • 居中对齐 margin-left:auto;margin-right:auto; 右对齐 margin-left:auto 下面放一段实例代码 仅供参考 .formItem { display: flex; flex-direction: column; margin-right: 30rpx; .item { display:
  • 需求需要在一个盒子内将文字水平垂直居中对齐 实现{{item.id}}export default {name: 'Test',data () {return {dataList: [{ id: 1, name: 'F1' },{ id: 2, name: 'F2' },{ id: 3, name: 'F3' },{ id: 4, name: 'F4'...
  • CSS属性—居中对齐

    千次阅读 热门讨论 2020-12-01 00:03:22
    为了网页的样式美观,我们经常要用到居中对齐来调整布局,所以特意整理了常用的居中对齐所需要的css属性。 元素居中对齐: 要水平居中对齐一个元素(如 <div>), 可以使用 margin: auto;。 设置到元素的宽度将...
  • css 之水平居中对齐

    千次阅读 2021-03-23 15:27:24
    1 文字水平居中对齐及它的延伸写法 1.设置text-align 属性 例如: <h4 style="text-align: center;">测试标题1</h4> 具体解释: CSS属性定义行内内容(例如文字)如何相对它的块父元素对齐。text...
  • 盒子水平居中 快兔兵团 居中的含义 块级盒居中 块级盒子木身居中 块级盒子里而有内容居中 行内元素居中 设置外围盒子 设置本身 块级元素居中(本身居中) 100100 认的是左上角对齐 div class=box </div> 盒子的位置 ...
  • 【代码】css盒子居中布局的几种方式以及内容首尾对齐
  • 这里记录了用css实现盒子居中的三种方法 普通盒子居中: 定位的盒子居中 flex布局实现盒子居中
  • 在样式设计中,我们会经常遇到居中问题,普通盒子对齐,可以用margin: auto来解决,比较方便。 但当一个父盒子下面有两个子元素,令其中一个子元素居中就不太方便 <head> <meta charset="utf-8"> &...
  • css——居中对齐方法

    万次阅读 2018-08-14 11:39:02
    仅对文字、图片、按钮等行内元素有效(display设置为inline或inline-block等)进行水平居中 2、margin:垂直 auto; 仅水平居中,且对浮动元素定位无效 .father{ width:500px; height:200px; background-colo...
  • css怎么把字体居中对齐

    千次阅读 2021-08-05 00:22:10
    css可以通过text-align属性设置字体居中对齐,此属性可以设置或检索对象中文本的左中右对齐方式。将此属性值设为center即可实现字体居中。css可以通过将text-align属性值设为center实现字体居中。text-align语法:...
  • 第一种:用css的position属性.div1 {width: 100px;height: 100px;border: 1px solid #000000;position: relative;}.div2 {width: 40px;height: 40px;background-color: red;position: absolute;margin: auto;top: 0;...
  • CSS实现字体居中对齐CSS样式属性为text-align,其值为center(居中)即可使文字居中。此属性还可以设置图片、标签等居中。css可以使用text-align属性设置文字居中对齐。text-align语法:text-align : left | right |...
  • css盒子对齐Having good control over alignment and justification is one of the major benefits of modern layout methods such as Flexbox and CSS Grid Layout. These alignment properties are specified in...
  • 盒子在父盒子居中对齐 html+css

    千次阅读 2020-12-07 21:55:23
    题目:子盒子在父盒子里居中对齐 一:父盒子加相对定位,子盒子加绝对定位实现。 代码: ...2.css样式实现子盒子居中对齐: .jz{ position: relative; height: 500px; width: 500px; background-col
  • 1.文本水平居中 ...2.盒子水平居中: margin:0 auto;margin:auto; /*注意:直接给当前元素本身设置,但是一定要给宽度度*/ 注意:以上方式多给页面版心设置,可使页面整体水平居中. 3.felx布局使盒子...
  • CSS盒子水平垂直居中方法集锦

    千次阅读 2022-04-23 21:06:35
    背景:开发中经常遇到盒子水平垂直居中的问题,即让某个元素的内容在水平和垂直方向上都居中,内容不仅限于文字,可能是图片或其他元素,本文汇总了几种简单常用的盒子居中方法,希望可以对前端同行们有一定的帮助 ...
  • css盒子水平居中方法

    2022-03-05 15:33:00
    align-items 当行交叉轴对齐方式 stretch 默认拉伸 (盒子高度不写 默认拉伸至父元素大小) flex-start 子项目在其所在行的起始位置摆放 flex-end 子项目在其所在行的结束位置摆放 center 中间 align-content:多行...
  • div{ width:200px; height:100px; position:absolute; left:50%; /*以父级宽度为准*/ top:50%; translate:transform(-50%,-50%); /*以自身宽度为准*/ }
  • 行内元素居中 平水居中:text-align:center; text-align 属性规定元素中的文本的水平对齐方式。 该属性通过指定行框与哪个点对齐,从而设置块级元素内文本的水平对齐方式。通过允许用户代理调整行内容中字母和字...
  • css 实现三列分散居中对齐 在这篇文章中,我们将使用几种不同的方法实现三列分散居中对齐,效果如图下: 一、使用flex实现对齐 <!DOCTYPE html> <html> <head> <style> .box_container {...
  • 1.外边距可以让块级盒子居中对齐,但是必须满足两个条件 (1)盒子必须指定了宽度(width) (2)盒子左右的外边距都设置为auto 2.代码: <!DOCTYPE html> <html lang="en"> <head> <...
  • 盒子水平垂直居中的方法 一、flex布局实现水平垂直居中 给父容器设置(不需要知道宽高) .father{ display: flex; justify-content: center; align-items: center; } 父元素开启弹性布局,子元素外边距...
  • css盒子居中对齐的问题

    千次阅读 2018-08-11 09:10:19
    1.没有定位的盒子水平居中 ​ 1.让盒子的文字内容居中对齐: text-align: center ​ 2.外边距实现盒子水平居中对齐,需要满足以下两... ​ *1....​ *2....2.绝对定位的盒子居中对齐 水平居中 1.首先让盒子left:50%,...
  • css如何居中对齐

    2021-06-09 16:14:03
    下面本篇文章就来给大家介绍一下使用CSS设置居中对齐的方法,希望对大家有所帮助。1、text-align:center —— 水平居中仅对文字、图片、按钮等行内元素有效(display设置为inline或inline-block等)进行水平居中2、...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 21,074
精华内容 8,429
关键字:

css盒子居中对齐

友情链接: zuoye.rar