0%

Css 水平居中

文本、行内元素、行内块元素 水平居中

1
2
3
.parent {
text-align: center;
}

使用到的样式:

  • text-align 属性规定元素中的行内元素(文本、行内块元素)的水平对齐方式。

    描述
    left 把行内元素(文本、行内块元素)排列到左边。默认值:由浏览器决定。
    right 把行内元素(文本、行内块元素)排列到右边。
    center 把行内元素(文本、行内块元素)排列到中间。
    justify 实现两端对齐行内元素(文本、行内块元素)效果。
    inherit 规定应该从父元素继承 text-align 属性的值。

单个块级元素

1
2
3
4
5
/* 需要居中的元素 */
.children {
width: 100px; /* 必须指定宽度 */
margin: 0 auto; /* 上下边距为0, 左右边距自动计算 */
}

使用到的样式:

  • margin 简写属性在一个声明中设置所有外边距属性。该属性可以有 1 到 4 个值。

    描述
    auto 浏览器计算外边距。
    length 规定以具体单位计的外边距值,比如像素、厘米等。默认值是 0px。
    % 规定基于父元素的宽度的百分比的外边距。
    inherit 规定应该从父元素继承外边距。

多个块级元素

1
2
3
4
5
6
.parent {
text-align: center;
}
.children {
display: inline-block;
}

原理:将子元素设置为行内块元素,将父级元素设置行内元素居中

使用绝对定位实现

1
2
3
4
5
6
7
8
9
10
11
12
.parent {
position: relative;
}

.children {
position: absolute;
left: 50%;
transform: translateX(-50%);
background-color: pink;
min-width: 50px;
min-height: 50px;
}

使用到的样式:

  • position 属性规定元素的定位类型。

    描述
    absolute 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
    fixed 生成绝对定位的元素,相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
    relative 生成相对定位的元素,相对于其正常位置进行定位。因此,”left:20” 会向元素的 LEFT 位置添加 20 像素。
    static 默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。
    inherit 规定应该从父元素继承 position 属性的值。
  • left 属性规定元素的左边缘。该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移。

    注释:如果 “position” 属性的值为 “static”,那么设置 “left” 属性不会产生任何效果。

    描述
    auto 默认值。通过浏览器计算左边缘的位置。
    % 设置以包含元素的百分比计的左边位置。可使用负值。
    length 使用 px、cm 等单位设置元素的左边位置。可使用负值。
    inherit 规定应该从父元素继承 left 属性的值。
  • transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

    描述
    none 定义不进行转换。
    matrix(n,n,n,n,n,n) 定义 2D 转换,使用六个值的矩阵。
    matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 定义 3D 转换,使用 16 个值的 4x4 矩阵。
    translate(x,y) 定义 2D 转换。
    translate3d(x,y,z) 定义 3D 转换。
    translateX(x) 定义转换,只是用 X 轴的值。
    translateY(y) 定义转换,只是用 Y 轴的值。
    translateZ(z) 定义 3D 转换,只是用 Z 轴的值。
    scale(x,y) 定义 2D 缩放转换。
    scale3d(x,y,z) 定义 3D 缩放转换。
    scaleX(x) 通过设置 X 轴的值来定义缩放转换。
    scaleY(y) 通过设置 Y 轴的值来定义缩放转换。
    scaleZ(z) 通过设置 Z 轴的值来定义 3D 缩放转换。
    rotate(angle) 定义 2D 旋转,在参数中规定角度。
    rotate3d(x,y,z,angle) 定义 3D 旋转。
    rotateX(angle) 定义沿着 X 轴的 3D 旋转。
    rotateY(angle) 定义沿着 Y 轴的 3D 旋转。
    rotateZ(angle) 定义沿着 Z 轴的 3D 旋转。
    skew(x-angle,y-angle) 定义沿着 X 和 Y 轴的 2D 倾斜转换。
    skewX(angle) 定义沿着 X 轴的 2D 倾斜转换。
    skewY(angle) 定义沿着 Y 轴的 2D 倾斜转换。
    perspective(n) 为 3D 转换元素定义透视视图。

使用flex实现

1
2
3
4
.parent {
display: flex;
justify-content: center;
}

使用到的样式:

Flex是Flexible Box的缩写,顾名思义为“弹性布局”,用来为盒装模型提供最大的灵活性。

  • justify-content 属性(水平)对齐弹性容器的项目,当项目不占用主轴上所有可用空间时。

    描述
    flex-start 默认值。项目位于容器的开头。
    flex-end 项目位于容器的结尾。
    center 项目位于容器中央。
    space-between 项目在行与行之间留有间隔。
    space-around 项目在行之前、行之间和行之后留有空间。
    initial 将此属性设置为其默认值。
    inherit 从其父元素继承此属性。
-------------本文结束,感谢您的阅读-------------
最近打算存点钱,吃点高端的像沙县小吃这样的餐厅