一、display-flex弹性布局
Flex,用来为盒装模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。
在父DIV中使用
display: -webkit-flex; /*在webkit内核的浏览器上使用要加前缀*/
display: flex; //将对象作为弹性伸缩盒显示// 沿水平主轴让元素从左向右排列
flex-direction:row;// 让元素沿垂直主轴从上到下垂直排列
flex-direction:column;// 沿水平主轴让元素从右向左排列
flex-direction:row-reverse;
在子DIV中使用:
flex:0.5;
二、图片垂直水平居中
HTML
<div class="container"><img src="path/to/your/image.jpg" alt="Centered Image">
</div>
CSS
.container {display: flex;justify-content: center; /* 水平居中 */align-items: center; /* 垂直居中 */height: 400px; /* 容器的高度,根据需要设置 */
}