首页 > 其他分享 >不定高的DIV居中

不定高的DIV居中

时间:2022-12-04 22:34:03浏览次数:62  
标签:居中 盒子 center align 50% 设置 DIV display 不定

1.使用flex

在父盒子设置display: flex; justify-content: center;align-items: center

2.使用css的transform


父盒子设置:display:relative
Div 设置: transform: translate(-50%,-50%);position: absolute;top: 50%;left: 50%;



3.display:table-cell

父盒子设置:display:table-cell; text-align:center;vertical-align:middle;
Div 设置: display:inline-block;vertical-align:middle;
 

标签:居中,盒子,center,align,50%,设置,DIV,display,不定
From: https://www.cnblogs.com/xiaoeshuang/p/16951015.html

相关文章

  • CSS基础-嵌套规范(拓展),居中方法,CSS 特性
    CSS基础-嵌套规范(拓展),居中方法,CSS特性拓展1:HTML嵌套规范注意点1.块级元素一般作为大容器,可以嵌套:文本、块级元素、行内元素、行内块元素等等…… ➢但是:p标签中不要......
  • HTML 块<div> 和 <span>
    可以通过<div>和<span>将HTML元素组合起来。HTML块元素大多数HTML元素被定义为块级元素或内联元素。编者注:“块级元素”译为blocklevelelement,“内联元素”......
  • 居中布局:水平居中和垂直居中
    居中布局在实际场景中很常见,在面试当中也经常会被考察。以下分别是水平居中和垂直居中常用的样式。水平居中margin:0auto;+width应用于块级元素居于容器中间若节......
  • 二元一次不定方程学习笔记
    定义含有两个未知数,且未知数项的次数都是\(1\)的不定方程就是二元一次不定方程,一般可以化成下面的形式:\[ax+by=c\]前置知识裴蜀定理定理:对于一个二元一次不定方程,当......
  • Codeforces Round #815 (Div. 2)
    比赛链接C题意:给定一个大小为n*m的01矩阵,每次操作你可以消除一个L形(\(2*2\)矩阵)内的所有1,每次必须保证消除至少一个1,求操作数的最大值。核心思路:这个其实我们需要模......
  • Educational Codeforces Round 132 (Rated for Div. 2)
    https://codeforces.com/contest/1709C.RecoveranRBS题意:这里原本有一个合法的括号序列,现在将这个合法的括号序列中的一部分字符串替换为?你可以将?替换为(或者)......
  • 转 CSS居中布局
    底层原理   都是C语言。万物之主C语言。底层语言。 硬件C语言。 转  CSS居中布局https://blog.csdn.net/qq_27575925/article/details/111876431 ......
  • Codeforces Round #832 (Div. 2)
    A.TwoGroups(CF1747A)题目大意给定一个整数数组\(a\),要求将\(a\)分成两部分\(s1,s2\),要求两部分的和的绝对值的差最大。即最大化\(|\sum(s_1)|-|\sum(s_2)|\)......
  • 关于图片溢出 div 最大宽度,但又不希望图片一直是 100%
    最近在开发我这个博客皮肤的时候,遇到一个小问题,就是图片超出div最大宽度,最开始我一直都是设置的图片宽度为100%,但这又不是我想的效果。用max-width:100%来代替wid......
  • Codeforces Round #816 (Div. 2)
    [比赛链接](Dashboard-CodeforcesRound#816(Div.2)-Codeforces)B题意:给定数组长度n,参数k,\(\sum_{1}^{n}a_i/k=b\),并且区间和是s。其中b和s都是题目给定的。核......