首页 > 其他分享 >css 水平垂直居中的几种方法

css 水平垂直居中的几种方法

时间:2023-11-21 17:14:58浏览次数:29  
标签:居中 box auto 50% 几种 wrap margin css absolute

水平垂直居中的几种方式

记录一下容器内只有单一元素时居中的几种方式

<div style="width: 300px; height: 300px" class="wrap">
      <div style="width: 100px; height: 100px" class="box"></div>
</div>

1.容器flex,调整内部轴线

.wrap {
  display: flex;
  justify-content: center;
  align-items: center;
}

2.容器flex,子元素margin-auto

.wrap {
  display: grid;
}

.box{
  margin: auto;
}

3.模拟table-cell

.wrap {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

.box{
  display: inline-block;
}

4.模拟grid

.wrap {
  display: grid;
}

.box{
  align-self: center;
  justify-self: center;
}

5.margin + transform

margin设置为auto时会吸收可用的空间,比如如果想要居右,可以设置margin-left为auto

.wrap {
  overflow: hidden;
}

.box{
  margin: 50% auto;
  transform: translateY(-50%);
}

6.inline-block + vertical-middle

.wrap {
  text-align: center;
  line-height: 300px;
}

.box{
  display: inline-block;
  vertical-align: middle;
}

7.比较简单的absolute + transform布局,父相对子绝对

.wrap {
  position: relative;
}

.box{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}

8.absolute + 负margin, 和上一个比较像

.wrap {
  position: relative;
}

.box{
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -50px;
  margin-top: -50px;
}

9.absolute + margin-auto

.wrap {
  position: relative;
}

.box{
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}

标签:居中,box,auto,50%,几种,wrap,margin,css,absolute
From: https://www.cnblogs.com/sheshuiyu/p/17847003.html

相关文章

  • CSS 尺寸单位概述
    在本文中,我们将探讨CSS尺寸单位的四大类别。我们将了解这些尺寸单位的用途、它们的最佳工作原理,以及如何在每种情况下选择最佳尺寸单位,从而在各种媒体和设备尺寸下优化我们的布局。关于CSS尺寸单位CSS提供了多种指定元素大小或长度的方式,其中一些更为直观。CSS单位可分......
  • day01 容器化的几种架构方式-pod创建过程原理-Scheduler的多种调度策略总结 (1.1-1.3
    一、容器化的几种架构方式1.、容器的由来及变迁史Docker->Docker-compose->Docerswarm->Kubernetes2、微服务容器化的几种解决方案特性DockerSwarm  Kubernetes安装和集群配置安装简单,集群不强大但在很复杂,集群非常强大图形用户界面没有官方图形界面,依托......
  • Tailwind CSS 解决了什么问题?
    从页面样式设计的颗粒度Granularity来谈起元素颗粒度我们知道,构成网页页面元素的最底层,最原始的东西就是HTML&CSS为每一个元素指定不同的内联inline-style或者class来控制它的呈现方式,最细程度可以到元素的style属性来控制,颗粒度停留在元素<!DOCTYPEhtml><htmll......
  • 纯CSS实现炫酷文本阴影效果
    如图所示,这是一个文本阴影效果,阴影有多个颜色,鼠标悬停时文本阴影效果消失,文本回到正常的效果。让我们逐步分解代码,看看如何使用纯CSS实现这个效果的。基于以上动图可以分析出以下是本次实现的主要几个功能点:文本有多个颜色的阴影的效果文本有空心镂空的效果鼠标悬停时文本回......
  • CSS选择器
    CSS选择器是用来选择需要改变样式的HTML元素的模式。到CSS3为止,支持的选择器类型有6种,包括标签选择器、派生选择器(上下文选择器)、id选择器、class选择器、属性选择器和通配符*选择器。以下是这六种选择器的简要介绍:标签选择器:通过HTML元素的标签名来选择元素。派生选择器(上下文选择......
  • Vue动态改变css样式的3种方法
    在网页开发中,我们经常会遇到动态的改变某个元素样式的需求,在vue里如何实现呢?官网上其实写的很详细了,对象语法,数组语法等。我自己总结了在开发中,个人用的比较多的三种方式1.class,三元表达式:class="[occupation==='请选择'?'lh60':'lh61']"css.red{color:red;}.blue......
  • Redis主从有几种常见的拓扑结构?
    Redis的复制拓扑结构可以支持单层或多层复制关系,根据拓扑复杂性可以分为以下三种:一主一从、一主多从、树状主从结构。1.一主一从结构一主一从结构是最简单的复制拓扑结构,用于主节点出现宕机时从节点提供故障转移支持。2.一主多从结构一主多从结构(又称为星形拓扑结构)使得应用端可......
  • 纯CSS动态渐变文本特效
    如图所示,这是一个炫酷的文本渐变效果,如同冰岛的极光一般。本次的文章让我们逐步分解代码,了解其实现原理。基于以上动图效果可以分析以下是本次动效实现的主要几点:文本中有多个颜色的动画每个颜色显示的半径不同,有大有小整体动画是有规律的重复进行着实现过程接下来开始正......
  • 一句话网页变灰 -css
    文档说明:只记录关键地方;发布时间:2023-11-19试验环境:chromium内核浏览器意义:记录一下怎么实现的工具:编写CSShtml{filter:grayscale(100%);}参考文档网站都变成灰色了,它是怎么实现的?一句话网页变灰百度一句话网页变灰谷歌......
  • css-1
     ......