css如何让块和文字居中在网页里居中对齐

垂直居中的话可能又点难，除非用d性盒子，正常的话。margin：0 auto； 水平都是能居中的
display: flex; //设置成d性的
justify-content: center; 主轴对齐方式 居中
align-items: center; //侧轴对齐方式 居中
就是把 包围块跟文字的那个div 设置成这个属性 那它里面的标签都会 水平加垂直居中
还有一种办法就是 用margin：0 auto； 水平居中后 用padding 来控制上下的内边距，这样实现垂直居中的效果。 用padding的时候最好加上box-sizing: border-box; // 总的盒子的大小不会变。

align-content 属性在d性容器内的各项没有占用交叉轴上所有可用的空间时对齐容器内的各项（垂直）。
align-items 属性定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。
功能类似，但是align-content是针对flex容器里面多轴(多行)的情况,align-items是针对一行的情况进行排列。

通过这样的Css样式就可以实现：

<div style="margin:0 auto;width:200px;">

<input class="submit" id="btn" type="submit" value="注册" />

</div>

使用margin-left:auto;margin-right:auto; 可以让你的div居中对齐。

style{margin-left:auto;margin-right:auto;} 缩写形式为： style{margin:0 auto;} ，数字0 表示上下边距是0。

后面的那个width也是个很重要的属性，因为按钮的宽度非常小，所以要设置一个合适的width值才可以让按钮居中。

扩展资料

css中margin属性用法：

margin简写属性在一个声明中设置所有外边距属性。该属性可以有1到4个值。格式为-margin:10px 5px 15px 20px;

实例:

1、margin:10px 5px 15px 20px;

上边距是 10px，右边距是 5px，下边距是 15px，左边距是 20px；

2、margin:10px 5px 15px;

上边距是 10px，右边距和左边距是 5px，下边距是 15px；

3、margin:10px 5px;

上边距和下边距是 10px，右边距和左边距是 5px；

4、margin:10px;

所有四个边距都是 10px。

引言
由于我忙于当前的项目，暂未更新，现在继续和大家一起去React Native门派学习，相信通过前几篇文章的介绍，我们对React Native门派有了一个大致了解，并且基本上搭建好了环境以及完成了新手村长的任务，写出了万门之祖的Hello world，那么接下来我们将逐一的了解，React Native中的每一个组件师兄，剖析他们的构成以及属性。咱们还是老套路直奔主题，上干货。

在学习各个组件之前，我们先学习一下Flexbox布局即这些组件如何排布布局的，如果你学过CSS布局，那么React Native中的Flexbox的工作原理与CSS基本一样的，没接触过也没关系，我们一起重头学习。

flexDirection可以决定布局的主轴的方向，即子元素是横着排布还是竖着排布，

justifyContent可以决定其子元素沿着主轴的排列方式，即对齐方式

alignItems可以决定其子元素沿着次轴的对齐方式

如果项目未设置高度或设为auto，将占满整个容器的高度（要使stretch选项生效的话，子元素在次轴方向上不能有固定的尺寸）

项目的第一行文字的基线对齐。

水平或垂直布局时：如果子View放不下，则自动换行, 默认为'nowrap'(不换行)

允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

权重，类似Android中weight
当flex取正整数值时是一个正数, 它使组件具有灵活性, 并且它的大小与其 flex 值成正比。因此, 将flex设置为2的组件将占用空间的两倍, 作为具有flex设置为1的组件。
当flex为0时, 该组件根据width和height进行调整, 并且不灵活。
当flex为-1 时, 组件通常根据width和height进行调整。但是, 如果没有足够的空间, 组件将收缩到其minWidth和minHeight

flexGrow、flexShrink 和 flexBasis 的工作与 CSS 相同。

定位模式，分为absolute和relative两种

即绝对定位，相对于父组件的位置

相对定位，相对于当前位置

定位的元素及其子代的zIndex顺序。当元素重叠时, zIndex顺序决定哪一个覆盖另一个。具有较大z-index的元素通常覆盖具有较低的元素

margin是指从自身边框到另一个容器边框之间的距离，就是容器外距离。 padding是指自身边框到自身内部另一个容器边框之间的距离，就是容器内距离，下面这张是CSS的效果图，只是名字不一样（marginTop），原理都是一样；

除了图上那些属性还有如下属性

marginTop, marginLeft, marginBottom, marginRight
marginHorizontal: 水平外距离相当于marginLeft和marginRight
marginVertical:垂直外距离相当于marginTop和marginBottom

borderWidth,borderTopWidth,borderLeftWidth,borderBottomWidth,borderRightWidth

paddingTop,paddingBottom,paddingLef,paddingRight
paddingHorizontal: 水平内距离相当于paddingLeft和paddingRight
paddingVertical:垂直内距离相当于paddingTop和paddingBottom

指定在其块级容器的大小太大时, 是剪辑内容、显示滚动条还是显示溢出的内容

1、首先先打开我们的开发环境 新建一个web项目。

2、在html中引入css文件 这里是html页面的代码 div和ul。

3、将所有标签的margin和padding初始为0 然后将父级div的display设置为flex align-items设置为center 。

4、运行web项目后得到的结果如图所示 垂直居中了。

5、 将display设置为table-cell，将vertical-align设置为middle即可 。

6、将ul的高度设置为百分比然后使用相对定位设置top为二分之一的百分之百减去ul的高度即可 。

7、使用line-height将其设置div的高度 必须是确定值，然后将li左或者右浮动即可。

d性布局中，属性“align-items”的意思是（）

A主轴对齐

B侧轴对齐(正确答案)

Cd性模型对象的子元素出现的顺序

D项目的长度

在flex容器中默认存在两条轴，水平主轴（main axis）和垂直的交叉轴（cross axis），这是默认的设置，你可以自主改变主轴和交叉轴。

在容器中的每个单元块被称为flex item，每个项目占据的主轴空间为（main size），占据的交叉轴的空间称为（cross size）。

默认值：row，主轴为水平方向，起点在左端。

row-reverse:主轴为水平方向，起点在右端

column:主轴为垂直方向，起点在上沿

column-reverse: 主轴为垂直方向，起点在下沿

默认情况下，项目都排在主轴线上，使用flex-wrap可实现项目的换行

默认值： nowrap不换行，即当主轴尺寸固定时，当空间不足时，项目尺寸会随之调整而不会挤到下一行

wrap: 项目主轴总尺寸超出容器时换行，第一行在上方

wrap-reverse:换行，第一行在下方

建立在主轴为水平方向时测试，即flex-direction: row

默认值：flex-start 左对齐

flex-end:右对齐

center：居中

space-between:两端对齐，项目之间的间隔相等，即剩余空间等分成间隙

space-around：每个项目两侧的间隔相等，所以项目之间的间隔比项目与边缘的间隔大一倍。

建立在主轴为水平方向时测试，即flex-direction: row

默认值为stretch即如果项目未设置高度或者设为auto，将占满整个容器的高度。

假设容器高度设置为100px，而项目都没有设置高度的情况下，则项目的高度也为100px。

flex-start：交叉轴的起点对齐

假设容器高度设置为100px，而项目分别为20px，40px，60px，80px，100px，则如上图显示。

flex-end：交叉轴的终点对齐

center:交叉轴的中心对齐

baseline：项目的第一行文字的基线对齐

以文字的底部为主，仔细看图可以理解。

这个可以这样理解：

当你flex-wrap设置为nowrap的时候，容器仅存在一根轴线，因为项目不会换行，就不会产生多条轴线。

当你flex-wrap设置为wrap的时候，容器可能会出现多条轴线，这时候你就需要去设置多条轴线之间的对齐方式了。

建立在主轴为水平方向时测试，即flex-direction:row,flex-wrap: wrap

默认值为stretch，看下图的图就很好理解了

从图可以看出又三条轴线（因为容器宽度有限），当值为stretch时会三条轴线平分容器的垂直方向上的空间。

值得注意的是，虽然在每条轴线上项目的默认值也为stretch，但是由于我每个项目我都设置了高度，所以它3并没有撑开整个容器。如果项目不设置高度的话就会变成下面这样：

这个我在前面也有提到（align-items），这里重点还是理解三条轴线会评分垂直轴上的空间。

flex-start：轴线全部在交叉轴上的起点对齐

flex-end:轴线全部在交叉轴上的终点对齐

center：轴线全部在交叉轴上的中间对齐

space-between: 轴线两端对齐，之间的间隔相等，即剩余空间等分成间隙。

space-around：每个轴线两侧的间隔相等，所以轴线之间的间隔比轴线与边缘的间隔大一倍。

到这里关于容器上的所有属性都讲完了

flex在RN中只能为整数值

引用：

---