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

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

原创

最新推荐文章于 2023-03-14 19:02:02 发布 · 1.3k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

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

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

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

页面结构

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

第一种方法（absolute+translate）不兼容ie8

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

SHAWN2016

关注关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

精选资源

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

01-20

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

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

09-25

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

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

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

丫丫不秃头噢---

03-30

186

<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

930

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

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

天外野草技术专栏

10-11

8390

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

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

歌谣的博客

01-26

416

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

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

最新发布

03-09

好的，用户问的是未知宽高元素的水平垂直居中的方法。我得先回忆一下常见的几种方法，然后逐一整理出来。首先，得确定用户可能需要的场景，比如在网页布局中，不同情况下可能需要不同的解决方案。首先想到的是...

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

weixin_44197906的博客

04-01

160

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

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

qq_21747731的专栏

03-30

357

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

weixin_41033048的博客

10-25

219

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

不定宽高的水平垂直居中

qq_27552077的博客

09-20

959

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

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

weixin_46886227的博客

03-27

1625

实现方式定位 + 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

613

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

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

deng8406280673979的博客

11-22

630

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

css-不固定宽高定位

weixin_30294295的博客

03-20

268

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

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

weixin_34292924的博客

06-21

359

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

css居中对齐的几种方式

袁成新（Chauncey Yuan）

10-13

922

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