不固定宽高元素水平垂直居中

最新推荐文章于 2023-03-14 19:02:02 发布

SHAWN2016

最新推荐文章于 2023-03-14 19:02:02 发布

阅读量1.1k

点赞数

分类专栏：前端小知识文章标签：不固定宽高元素如何水平垂直居中水平垂直居中不固定宽高元素水平垂直居中

本文链接：https://blog.csdn.net/SHAWN2016/article/details/82836896

版权

本文介绍了在不使用flex和grid布局的情况下，如何实现不定高宽元素的水平垂直居中。讨论了absolute+translate方法（不兼容IE8）、table-cell+inline-block方法（不兼容IE67）以及一种常见的误解——通过设置top、left、right、bottom为0和margin:auto来实现居中（实际无法达到预期效果）。

摘要由CSDN通过智能技术生成

背景：
本文主要讲述不用flex布局和grid布局时如何设置不定高宽元素的水平垂直居中，这是很多时候经常遇到的问题。

页面结构

  <div class="box">
  	<div class="content"><span>hell</span><br/>ssssssss<br/>shshsh
  		</div>
  </div>

第一种方法ÿ

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

SHAWN2016

关注关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

元素水平垂直居中的几种方法

01-20

`flexbox`布局提供了强大的灵活性，可以轻松地实现子元素的水平垂直居中，而且对子元素的宽高无特殊要求。总结来说，选择哪种方法取决于项目的需求和浏览器的兼容性。对于现代浏览器，`flexbox`是最推荐的方法，...

宽度高度不固定的div 如何水平居中以及垂直居中

09-25

在网页设计中，让宽度和高度不固定的div实现水平居中和垂直居中是一个常见的需求。这涉及到CSS布局技巧和浏览器兼容性处理。以下是一些关键的解决方案。 **水平居中** 1. **使用`text-align:center;`** 父容器...

参与评论您还未登录，请先登录后发表或查看评论

不定宽高元素水平垂直居中

丫丫不秃头噢---

03-30

129

<div class="container"> <div class="item"></div> </div> 绝对定位 + margin：auto .container{ position:relative; } .item{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: .

不定宽高元素的水平垂直居中

Elliotbaird的博客

08-26

869

这个问题最早是在某个公司笔试的时候出现的，当时还不会啊，除了会text-align: center;外啥也不会，特此做一个总结，也过了好久了，现在就当整理笔记了。实现的效果如下： html代码：<div class=""> <div>我是一段文字</div> </div>方法有三： 1、绝对定位来实现.one { position: relative; //父类元素设

不定宽高的水平垂直居中实现方式

天外野草技术专栏

10-11

8320

对于CSS3开发而言，不定宽高的水平垂直居中是我们经常要用到得，实现方式也有很多，下面给大家介绍一下我在众多项目中的一些实现方案，希望对大家有所帮助。方案一： .wraper{ position:absolute; top:50%; left:50%; -webkit-transform:translate(-50%,-50%); } 方案二： .wrape

[css] 写出在不固定宽高的元素在固定高度的情况下水平垂直居中的方法

歌谣的博客

01-26

281

[css] 写出在不固定宽高的元素在固定高度的情况下水平垂直居中的方法 flex布局；还有就是可以用定位也可以实现等等； flex：父div：｛display：flex； justify-content: center;align-items: center;｝；定位方法，相对定位在通过偏移元素实现水平垂直居中等等，我常用就是这两种，使用的时候注意兼容性个人简介我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易，但坚持一定很酷。欢迎大家一起讨论主目录与歌谣一起通关前端面试题 ...

【css】不定宽高的div水平、垂直居中问题

热门推荐

汪小穆的博客

09-15

1万+

1、兼容最佳

块级元素的三种垂直水平居中的方法

12-29

直奔主题在这里提供三种块级元素垂直水平居中的方法 flex（子级宽高可固定也可不固定，随意）定位+margin（固定子级的宽高，margin-top,margin-left取自身一半的负值）定位+transform（不固定子级的宽高） flex...

固定宽高的DIV如何绝对居中

12-13

在网页设计中，将一个固定宽高的`div`元素居中是常见的布局需求。这个问题的解决方案通常涉及到CSS的定位属性，如`position`、`top`、`left`以及`margin`。以下是对该问题的详细说明：首先，我们要确保元素的宽高...

宽高不固定的div 垂直水平居中

weixin_44197906的博客

04-01

127

1.display:flex弹性盒子方法 .app{ display:flex; justify-content:center; align-items:center; width:500px; height:500px; }

不定宽高、定宽高的水平垂直居中问题

qq_21747731的专栏

03-30

312

不固定宽高的居中方法（水平和垂直方向的）

weixin_41033048的博客

10-25

178

display: inline-block; margin:0 auto; position: relative; top:50%; transform: translateY(-50%);

不定宽高的水平垂直居中

qq_27552077的博客

09-20

913

经常遇到不定宽高水平垂直居中的问题，下面来说一下主要的两种方法一、使用CSS3 transform 直接上代码<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>不定宽高水平垂直居中</title> <style type="text/css"> .wrap{

元素不定宽高的情况下水平垂直居中的方法有哪些？

weixin_46886227的博客

03-27

1539

实现方式定位 + margin:auto 定位 + margin: 负值定位 + transform table布局 flex布局 grid网格布局定位+margin:auto <style> .father{ width:500px; height:300px; border:1px solid #0a3b98; position: relative;.

元素水平垂直居中的方法有哪些？如果元素不定宽高呢？

huihui_999的博客

03-14

519

元素不定宽高实现水平居中的方法

div在不固定高度的情况下垂直或者水平居中

deng8406280673979的博客

11-22

585

方法一：用一个“ghost”伪元素（看不见的伪元素）和 inline-block / vertical-align 可以搞定居中，非常巧妙。但是这个方法要求待居中的元素是 inline-block，不是一个真正通用的方案。 html如下： <div class="block" style="height: 300px;"> <div class...

css-不固定宽高定位

weixin_30294295的博客

03-20

230

position: fixed; top:50%; left: 50%; transform: translate(-50%, -50%); 转载于:https://www.cnblogs.com/yangjing1314/p/8608379.html

如何让一个不固定高宽的图片，垂直和水平居中在页面中间？

weixin_34292924的博客

06-21

325

问:如何让一个不固定高宽的图片，垂直和水平居中在页面中间？目前的解决办法：<div class="pannel"> <div class="ot"> <img src="http://www.wanggouchao.com/data/upload/custom/1304/17/516e585ba9b23.gif" /> ...

css居中对齐的几种方式

袁成新（Chauncey Yuan）

10-13

826

第一种 css .parent { width: 300px; height: 300px; background: #fff000; display: table-cell; vertical-align: middle; text-align: cen...

父元素和子元素宽高不固定，如何实现水平垂直居中