CSS 可视窗口居中是一种常见的设计需求,它可以让页面元素水平和垂直居中,从而使整个页面看起来更加美观和专业。下面是一个示例:
{ display: flex; justify-content: center; align-items: center; }
该代码块使用了 flexbox 布局方式,其中display: flex;
用于将容器转换成 flexbox 容器,justify-content: center;
用于水平居中,align-items: center;
用户垂直居中。
除此之外,我们还可以使用position:absolute;
和transform: translate(-50%, -50%);
来实现可视窗口居中效果。具体示例如下:
{ position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
该代码块使用了绝对定位,其中left: 50%;
用于将容器相对于父级左边框的距离设为 50%,top: 50%;
用于将容器相对于父级上边框的距离设为 50%。然后,我们使用transform: translate(-50%, -50%);
将容器自身向上和向左移动一半宽高的距离,从而实现可视窗口居中效果。