div 调像素

在div上居中     

?

1	<div class="container"  style="display: flex; justify-content: center; align-items: center;  ">

　　

 

 

 在圖像調

?

1	<img id=im1 style="max-width: 150%; max-height: 150%; class="widget widget-image" alt src=static/picture/spltop.png >

　　

 动了 row 元素的样式，在tyle增加了 display: flex; justify-content:center; align-items:center; 属性，使其水平和垂直居中

?

1 2 3

<div class="row1" id="row--78700-103-189-186" data-trigger="none" data-animate="fade" data-delay="500"  style="padding-top:20px;padding-bottom:0px;margin:0px;outline:none;background-color:rgba(255,255,255,0);display:flex;justify-content:center;align-items:center;">   ... </div>

　　

 

object-fit:contain; 将图像缩放到适合其容器的大小，并使用 margin:auto; 将其居中显示。这个方法可以确保图像不会被拉伸或压缩，并且始终居中显示。

 

 

display:flex; 并不是直接表示居中，它是一种 CSS 布局方式，可以用来创建灵活的布局，并且可以轻松地实现元素的垂直和水平居中。

display:flex; 将元素的子元素放置在一个弹性容器中，并且可以使用 justify-content 和 align-items 属性来控制子元素的水平和垂直对齐方式。

例如，justify-content:center; align-items:center; 可以将所有子元素水平和垂直居中。您可以将这些属性添加到包含要居中的元素的父元素中，以实现居中对齐。

需要注意的是，display:flex; 并不是唯一可以实现居中对齐的方法，还有其他的方法，例如使用绝对定位，以及使用 margin 和 padding 等 CSS 属性。