一、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; /* 容器的高度,根据需要设置 */
}