CSS实现元素水平/垂直居中的方法

本是古典何须时尚 2022-07-16 01:59 213阅读 0赞

首先，我们来了解水平居中,它有很多种方法，我们暂时先来了解其中的几种：

1.    在实现方案中，我们最熟悉的莫过于给元素定义一个宽度，然后使用margin：

body{     width:960px;     margin:0 auto; }

这个是当我们的定义元素的宽度时显现的，如果我们不能定义宽度时，该怎么办呢？

2.    我们对于定位也是常用的，在这里当然也可以采用定位的方法来实现：

body{     position:absolute;     left:50%; }

3.   既然定位可以，那浮动也是可以的：

body{     float:left;     right:50%; }

4.    对于几个元素同时居中在一条线上：

body{    vertical-align:middle;  }

5.    利用table:

ul{     display:table; } ul li{     display:table-cell; }

6.    还可以使用inline-block来实现，但要使用这个就得在其父元素上设置text-align.如下：

body{     text-align:center; } .content{     display:inline-block; }

实现垂直居中的四种方法：

1.    只能是单行文本居中（可适用于所有浏览器）：

.content{    height:100px;    line-height:100px;  }

2.    跟水平居中一样，垂直也可以用定位的方法：

.content{     position:absolute;     top:0;     bottom:0;     left:0;     right:0;     margin:auto; } 或者 .content{     position:absolute;     top:50%; }

定位的方法，它的缺点是当没有足够的空间时，元素会消失。

3.    对此，浮动也是可以的：

.content{     float:left;      height:50%;       margin-bottom:-120px; } .footer{     clear:both;     height:240px;     position:relative; }

对于浮动，我们需要在之后清除，并显示在中间。

4.    也可以使用vertical-align属性：

.content{     display:table-cell;     vertical-align:middle; }

这种方法可以随意改变元素高度，但在IE8中无效。

现在来看个div模块在屏幕中居中的例子：

position: absolute;  top: 50%;  left: 50%; //上下移动屏幕的50% margin: auto; -webkit-transform: translate(-50%,-50%);   //减去自身的50%（多移动的） -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%);

这个基本可以不确定宽高的模块居中，但是在低版本的浏览器中可能出现问题，现在还没测试过，但是主流的都是可以的！

© 著作权归作者所有

发表评论取消回复

表情：

评论列表（有 0 条评论，213人围观）

还没有评论，来说两句吧...

相关阅读

相关 css实现水平/垂直居中的方式

水平居中分为块状元素和行内元素，而块状元素又分为定宽块状元素和不定宽块状元素。 1、行内元素水(display: inline)平居中（文本、图片等）是通过给父元素设置 te

我不是女神ヾ/ 2022年12月20日 03:17/ 0 赞/ 105 阅读

相关 CSS-水平/垂直居中的方法

[转载原文][Link 1] [可以参考][Link 2] 水平居中块级元素居中 HTML 结构 <div class="parent">

你的名字/ 2022年12月03日 02:25/ 0 赞/ 193 阅读

相关 CSS 水平垂直居中的方法

CSS 水平垂直居中的方法 CSS 水平垂直居中的方法水平居中水平垂直居中 HTML文件模板居中元

谁践踏了优雅/ 2022年10月22日 05:25/ 0 赞/ 181 阅读

相关 CSS 实现元素水平垂直居中的 N 种方式

点击上方三分钟学前端，关注公众号回复交流，加入前端编程面试算法每日一题群面试官也在看的前端面试资料 ![ba40f0ea9cf747c0909f83922c3

╰+哭是因爲堅強的太久メ/ 2022年09月04日 03:59/ 0 赞/ 57 阅读

相关 CSS实现元素水平/垂直居中的方法

首先，我们来了解水平居中,它有很多种方法，我们暂时先来了解其中的几种： 1. 在实现方案中，我们最熟悉的莫过于给元素定义一个宽度，然后使用margin：

本是古典何须时尚/ 2022年07月16日 01:59/ 0 赞/ 214 阅读

相关 css实现垂直居中和水平居中的方法

一、 CSS 来实现对象的垂直居中的几种不同方法。 1、使用表格的 vertical-alignproperty属性。 <div id="wrapper">

忘是亡心i/ 2022年07月15日 12:15/ 0 赞/ 200 阅读

相关 css实现垂直居中和水平居中的方法

一、 CSS 来实现对象的垂直居中的几种不同方法。 1、使用表格的 vertical-alignproperty属性。 <div id="wrapper">

秒速五厘米/ 2022年07月15日 12:15/ 0 赞/ 178 阅读

相关实现垂直水平居中的方法

因为这一类型题目我面试的时候被问了很多遍，然后就想总结一下吧。大概分了几类。 html代码如下： <div id="parent"> <div i

女爷i/ 2022年06月06日 08:40/ 0 赞/ 402 阅读

相关图片实现水平垂直居中的方法

水平居中：text-align:center 垂直居中：line-height的值同height或vertical-align:middle 让图片在屏幕正中显示的几种方

╰+哭是因爲堅強的太久メ/ 2022年02月25日 13:48/ 0 赞/ 182 阅读

相关 CSS水平居中，垂直居中，水平垂直居中

本文主要介绍水平居中，垂直居中，还有水平垂直居中各种办法，思维导图如下： ![640?wx\_fmt=png][640_wx_fmt_png] ![640

小咪咪/ 2022年02月15日 14:53/ 0 赞/ 368 阅读