css 布局用到的相关属性

一：display: table

display：table解决了一部分需要使用表格特性但又不需要表格语义的情况，设置固定的父元素宽度，可以使若干个子元素平分宽度。

例如：

 <view class='demo1'>
    <view>1111</view>
    <view>2222</view>
    <view>3333</view>
  </view>
.demo1 {
  display: table;
  width: 85%;
  margin: 30rpx auto;
  border: 1px solid red;
  padding: 15rpx;
}

.demo1 view {
  display: table-cell;
  padding: 10rpx;
  border: 1px solid green;
  border-right: none;
  text-align: center;
  vertical-align: middle;
}

.demo1 view:last-child {
  border-right: 1px solid green;
}

效果图：

image.png

二：display: table-cell

该属性指让标签元素以表格单元格的形式呈现，类似于td标签。目前IE8+以及其他现代浏览器都是支持此属性的，但是IE6/7不支持。利用这个特性可以实现文字的垂直居中效果。同时它也会破坏一些CSS属性，使用table-cell时最好不要与float以及position: absolute一起使用。对margin值无反应，可以响应padding的设置。对高度和宽度高度敏感 ，不要对display：table-cell使用百分比设置宽度和高。

例如：

<view class='cell'>table cell</view>
.cell {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  padding-left: 50rpx;/*起作用 */
  margin-left: 50rpx;/*不起作用 */
}

效果图：

距离为padding设置的距离

。

不设置padding，table-cell会垂直居中

三：vertical-align 垂直（居上，居中，居下）

vertical-align 属性设置元素的垂直对齐方式。 以前想要一些元素垂直居中对齐，经常用line-height，可是对于图片来说，line-height的表现并不理想，所以得用vertical-align:middle。

使用方法：

1：父元素（inline-block\block）必须含有line-height（inline元素有无皆可），子元素中的（inline-block/inline元素）vertical-align才能起作用。
2：vertical-align不可继承，必须对子元素单独设置。
例如：

 <view class='demo3'>
    <image src='/images/employeeList/zhanyuan.png'></image>
  </view>
.demo3{ width:200px; height:200px; line-height:200px; border: 1px solid red;}
.demo3 image{ height:100px; width:100px;vertical-align:middle;}

效果图：

image.png

四：justify-content align-items

justify-content align-items 是flex盒子模型的属性

justify-content 用于设置弹性盒子元素在主轴（横轴）方向上的对齐方式。
align-items 用于设置弹性盒子元素的侧轴（纵轴）方向上的对齐方式。
例如：

<view class='flex-text'>flex</view>
.flex-text {
  width: 200rpx;
  height: 200rpx;
  border: 1px solid red;
  display: flex;
  justify-content: center;/* 横轴居中 */
  align-items: center;/* 纵轴居中 */
}

效果图：

横轴纵轴居中