关于DIV的几种对齐方式

常见问题：一个盒子在另一个盒子里面咋么，怎么让他水平居中

1.Flex 方法

将父元素设设置为弹性布局：display: flex

再设置属性：justify-content: center（justify-content 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。）

再设置属性：align-items: center;（align-items 属性定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。）

display: flex;
justify-content: center;
align-items: center;
text-align: center;

2.position定位方法

要先采用绝对定位position：absolute，若改为相对定位position：relative；则只会左右居中，不会上下居中。

.test{background-color: red;width:100px;height:100px;position:relative;margin:200px auto;}.test1{height:50px;width:50px;background-color:pink;position:absolute;text-align: center;line-height:50px;top: 0;left: 0;bottom: 0;right: 0;margin: auto;}

3.position+transform 方法

.定位+transform（不需要知道子盒子的宽高）

.test{background-color:red;width:100px;height:100px;position:relative;}.test1{height:50px;width:50px;background-color:pink;position:absolute;top:50%;left:50%;transform: translate(-50% ,-50%);
}

CSS中关于div的对齐方式相关推荐

在html中如何使用span,如何在HTML和CSS中使用DIV和span？
本文将帮助您理解和使用在css和HTML中如何使用"div"和"span",并用CSS对它们进行样式化.使用"div"的主要目的是将主体分成 ...
CSS入门（CSS常用属性----字体、对齐方式、display属性、浮动）
CSS常用属性设置 3.字体设置字体 font-family ①当font-family的属性值包含空格或特殊字符时,需要将font-family的属性值用引号括起来. ②font-family有& ...
html中设置图片的对齐方式,align属性怎么用图片align属性到底是什么意思
中align属性怎么使用?如下列代码: stock: W3C官方给出的解释是:所有浏览器都支持 align 属性的 "left" 和 "right" 值,除了 ...
css text-align-last设置末尾文本对齐方式
text-align-last:auto | start | end | left | right | center | justify auto: 无特殊对齐方式. left: 内容左对齐. cen ...
CSS中的四种定位方式
在CSS中定位有以下4种: 静态定位 - static 相对定位 - relative 绝对定位 - absolute 固定定位 - fixed 静态定位 - static 静态定位是css中的默认定 ...
Unity3D中UGUI的RectTransform对齐方式详解
https://www.jianshu.com/p/831e2dd7c546 https://www.jianshu.com/p/4592bf809c8b 在Unity自带的UGUI中,RectTra ...
CSS中实现文字两端对齐的方法，登陆注册界面经常用到
在写登陆或注册界面时,经常会遇到文字两端对齐(word中有类似对齐方式)的问题,如下图: 用户名和密码并没有两端对齐,那么该怎样处理其实只需要两行CSS代码就可以解决: 关键两行是:text-ali ...
html中div居中的代码怎么写,CSS中让DIV居中的代码
CSS 如何使DIV层水平居中今天用CSS碰到个很棘手的问题,DIV本身没有定义自己居中的属性, 网上很多的方法都是介绍用上级的text-align: center然后嵌套一层DIV来解决问题. 可 ...
CSS中实现DIV容器垂直居中
1.vertical-align:middle 垂直对齐如表格元素中的<td>.<th>.<caption>等,而像<DIV>.<span> ...

CSS中关于div的对齐方式

关于DIV的几种对齐方式

1.Flex 方法

2.position定位方法

3.position+transform 方法

CSS中关于div的对齐方式相关推荐

最新文章

热门文章

CSS中关于div的对齐方式

关于DIV的几种对齐方式

1.Flex 方法

2.position定位 方法

3.position+transform 方法

CSS中关于div的对齐方式相关推荐

最新文章

热门文章

2.position定位方法