首页 > 其他分享 >CSS 实现水平和垂直居中的三种方法

CSS 实现水平和垂直居中的三种方法

时间:2023-02-13 21:47:00浏览次数:41  
标签:居中 flex center 负边 50% 垂直 三种 CSS

  1. 绝对定位 + 负边距:使用绝对定位并设置左右负边距和上下负边距,就可以实现水平和垂直居中的效果。
.center-element {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

 

  1. flex 布局:使用 flex 布局可以轻松实现水平和垂直居中。
.center-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

 

  1. grid 布局:使用 grid 布局也可以实现水平和垂直居中。
.center-container {
  display: grid;
  place-items: center;
}

 

这些方法都可以实现水平和垂直居中的效果,您可以根据需要选择一种方法使用。

标签:居中,flex,center,负边,50%,垂直,三种,CSS
From: https://www.cnblogs.com/taoshihan/p/17117904.html

相关文章

  • css知识点
    1.css盒模型:盒子的组成:内容content,内边距padding,边框border,外边距margin盒模型的类型:标准盒模型:margin+padding+border+contentIE盒模型:margin+content(包含了bo......
  • 打开MASA Blazor的正确姿势3.1:HTML和CSS基础
    一、HTML和CSS关系HTML元素定义网页的文档结构,CSS定义网页的排版样式。这句话不好理解,通过导航栏案例领会一下(以下案例非常精彩):1、导航栏的HTML文档结构<ul><li><a......
  • css悬浮动画
    1.Grow-Shadow /*Grow-Shadow*/.hvr-grow-shadow{display:inline-block;vertical-align:middle;-webkit-transform:perspective(1px)translateZ(0);......
  • CSS畅想 | 有一天,我遇到了一个奇特的路灯,眼里一下子有了光
    灵感来源我对系列这个词的执着来源于大学时代看小说的习惯,看书爱看系列文。于是我也喜欢把自己写的文章分分类,比如「工作小记」、「经验总结」等。当然了它们学会自己成长之......
  • css积累-1
    提问1如何设置div居中回答style="width:95%;min-height:400px;display:flex;"提问2如何播放MP4回答<videoid='video'style='width:95%;min-height:400px......
  • CSS Animation
    为什么要引入CSSAnimation视觉动物怎么能止步于看静态的?人性是第一生产力关键是解放了Javascript如何完成一个简单的动画使用@keyframes结合animation来完成举......
  • 学习css的第五天~
    文本样式属性名属性属性值注释文本颜色color英文关键词、十六进制、rgb方法 文本行高line-height像素值控制行与行之间的距离对齐方式text-align......
  • 学习css的第四天~
    字体样式属性名属性属性值注释字体类型font-family字体名称英文放前面,中文放后面字体大小font-size像素值 字体风格font-stylenormal:默认italic......
  • Solon2 开发之容器,五、Bean 扫描的三种方式
    1、启动时扫描packageorg.example.demo;publicclassDemoApp{publicstaticvoidmain(String[]args){////DemoApp.clas的作用,是提供一个......
  • Solon2 开发之容器,二、构建一个 Bean 的三种方式
    1、手动简单的构建://生成普通的BeanSolon.context().wrapAndPut(UserService.class,newUserServiceImpl());//生成带注解的Bean(比如:@Controller)Solon.context().be......