扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 精选 >div垂直居中的方法有哪些
  • 786

0
分享到

div垂直居中的方法有哪些

2023-06-08 04:06:05 786人浏览 薄情痞子
摘要

这篇文章主要讲解了“div垂直居中的方法有哪些”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“div垂直居中的方法有哪些”吧！在说到这个问题的时候，也许有人会问CSS中不是有vertical-

这篇文章主要讲解了“div垂直居中的方法有哪些”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“div垂直居中的方法有哪些”吧！

在说到这个问题的时候，也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗？即使是某些浏览器不支持我只需做少许的Csshack技术就可以啊！所以在这里我还要啰嗦两句，CSS中的确是有vertical-align属性，但是它只对(X)html元素中拥有valign特性的元素才生 效，例如表格元素中的<td>、<th>、<caption>等，而像<div>、<span>这样的元素是没有valign特性的，因此使用vertical-align对它们不起作用。
一、单行垂直居中
如果一个容器中只有一行文字，对它实现居中相对比较简单，我们只需要设置它的实际高度height和所在行的高度line-height相等即可。
如：

代码如下:


div{
height:25px;
line-height:25px;
overflow:hidden;
}


这段代码很简，后面使用overflow:hidden的设置是为了防止内容超出容器或者产生自动换行，这样就达不到垂直居中效果了。更多CSS教
程。

代码如下:


<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title>单行文字实现垂直居中</title>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<styletype="text/css">
body{font-size:12px;font-family:tahoma;}
div{
height:25px;
line-height:25px;
border:1pxsolid#FF0099;
background-color:#FFCCFF;
}
</style>
</head>
<body>
<div>现在我们要使这段文字垂直居中显示！</div>
</body>
</html>


二、多行未知高度文字的垂直居中
如果一段内容，它的高度是可变的那么我们就可以使用上一节讲到的实现水平居中时使用到的最后一种方法，就是设定Padding，使上下的
padding值相同即可。同样的，这也是一种“看起来”的垂直居中方式，它只不过是使文字把<div>完全填充的一种访求而已。可以使用类似下
面的代码：

代码如下:


div{
padding:25px;
}


这种方法的优点就是它可以在任何浏览器上运行，并且代码很简单，只不过这种方法应用的前提就是容器的高度必须是可伸缩的。

代码如下:


<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title>多行文字实现垂直居中</title>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<styletype="text/css">
body{font-size:12px;font-family:tahoma;}
div{
padding:25px;
border:1pxsolid#FF0099;
background-color:#FFCCFF;
width:760px;
}
</style>
</head>
<body>
<div><pre>现在我们要使这段文字垂直居中显示！
div{
padding:25px;
border:1pxsolid#FF0099;
background-color:#FFCCFF;
}
</pre></div>
</body>
</html>


三、多行文本固定高度的居中
在本文的一开始，我们已经说过CSS中的vertical-align属性只会对拥有valign特性的(X)HTML标签起作用，但是在CSS中还有一个display属性能够模拟<table>，所以我们可以使用这个属性来让<div>模拟<table>就可以使用vertical-align了。注意，display:table和display:table-cell的使用方法，前者必须设置在父元素上，后者必须设置在子元素上，因此我们要为需要定位的文本再增加一个<div>元素：

代码如下:


div#wrap{
height:400px;
display:table;
}
div#content{
vertical-align:middle;
display:table-cell;
border:1pxsolid#FF0099;
background-color:#FFCCFF;
width:760px;
}

代码如下:


<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title>多行文字实现垂直居中</title>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<styletype="text/css">
body{font-size:12px;font-family:tahoma;}
div#wrap{
height:400px;
display:table;
}
div#content{
vertical-align:middle;
display:table-cell;
border:1pxsolid#FF0099;
background-color:#FFCCFF;
width:760px;
}
</style>
</head>
<body>
<divid="wrap">
<divid="content"><pre>现在我们要使这段文字垂直居中显示！WEBjx.Com
div#wrap{
height:400px;
display:table;
}
div#content{
vertical-align:middle;
display:table-cell;
border:1pxsolid#FF0099;
background-color:#FFCCFF;
width:760px;
}
</pre></div>
</div>
</body>
</html>


这个方法应该是很理想了，但是不幸的是InternetExplorer6并不能正确地理解display:table和display:table-cell，因此这种方法在InternetExplorer6及以下的版本中是无效的。嗯，这让人很郁闷！不过我们还其它的办法
四、在InternetExplorer中的解决方案
在InternetExplorer6及以下版本中，在高度的计算上存在着缺陷的。在InternetExplorer6中对父元素进行定位后，如果再对子元素进行百分比计算时，计算的基础似乎是有继承性的（如果定位的数值是绝对数值没有这个问题，但是使用百分比计算的基础将不再是该元素的高度，而从父元素继承来的定位高度）。例如，我们有下面这样一个(X)HTML代码段：

代码如下:


<divid="wrap">
<divid="subwrap">
<divid="content">
</div>
</div>
</div>


如果我们对subwrap进行了绝对定位，那么content也会继承了这个这个属性，虽然它不会在页面中马上显示出来，但是如果再对content进行相对定位的时候，你使用的100%分比将不再是content原有的高度。例如，我们设定了subwrap的position为40%，我们如果想使content的上边缘和wrap重合的话就必须设置top:-80%;那么，如果我们设定subwrap的top:50%的话，我们必须使用100%才能使content回到原来的位置上去 ，但是如果我们把content也设置50%呢？那么它就正好垂直居中了。所以我们可以使用这中方法来实现InternetExplorer6中的垂直居中：

代码如下:


div#wrap{
border:1pxsolid#FF0099;
background-color:#FFCCFF;
width:760px;
height:400px;
position:relative;
}
div#subwrap{
position:absolute;
border:1pxsolid#000;
top:50%;
}
div#content{
border:1pxsolid#000;
position:relative;
top:-50%;
}


当然，这段代码只能在InternetExlporer6等计算存在问题的浏览器中才会有作用。（不过我不解，我查阅了很多文章，不知道是因为出处相同还是什么原因，似乎很多人都不愿意去解释InternetExlporer6中这这个Bug的原理，我也只是了解了一点皮毛，还要再研究）

代码如下:


<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title>多行文字实现垂直居中</title>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<styletype="text/css">
body{font-size:12px;font-family:tahoma;}
div#wrap{
border:1pxsolid#FF0099;
background-color:#FFCCFF;
width:760px;
height:400px;
position:relative;
}
div#subwrap{
position:absolute;
top:50%;
}
div#content{
position:relative;
top:-50%;
}
</style>
</head>
<body>
<divid="wrap">
<divid="subwrap">
<divid="content"><pre>现在我们要使这段文字垂直居中显示！
div#wrap{
border:1pxsolid#FF0099;
background-color:#FFCCFF;
width:760px;
height:500px;
position:relative;
}
div#subwrap{
position:absolute;
border:1pxsolid#000;
top:50%;
}
div#content{
border:1pxsolid#000;
position:relative;
top:-50%;
}</pre>
</div>
</div>
</div>
</body>
</html>


五、完美的解决方案
那么我们综合上面两种方法就可以得到一个完美的解决方案，不过这要用到CSShack的知识。对于如果使用CSSHack来区分浏览器，你可以参考这篇“简单CSShack：区分IE6、IE7、IE8、Firefox、Opera”：

代码如下:


div#wrap{
display:table;
border:1pxsolid#FF0099;
background-color:#FFCCFF;
width:760px;
height:400px;
_position:relative;
overflow:hidden;
}
div#subwrap{
vertical-align:middle;
display:table-cell;
_position:absolute;
_top:50%;
}
div#content{
_position:relative;
_top:-50%;
}


至此，一个完美的居中方案就产生了。

代码如下:


<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title>多行文字实现垂直居中</title>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<styletype="text/css">
body{font-size:12px;font-family:tahoma;}
div#wrap{
display:table;
border:1pxsolid#FF0099;
background-color:#FFCCFF;
width:760px;
height:400px;
_position:relative;
overflow:hidden;
}
div#subwrap{
vertical-align:middle;
display:table-cell;
_position:absolute;
_top:50%;
}
div#content{
_position:relative;
_top:-50%;
}
</style>
</head>
<body>
<divid="wrap">
<divid="subwrap">
<divid="content"><pre>现在我们要使这段文字垂直居中显示！
div#wrap{
border:1pxsolid#FF0099;
background-color:#FFCCFF;
width:760px;
height:500px;
position:relative;
}
div#subwrap{
position:absolute;
border:1pxsolid#000;
top:50%;
}
div#content{
border:1pxsolid#000;
position:relative;
top:-50%;
}</pre>
</div>
</div>
</div>
</body>
</html>


p.s.垂直居中vertical-align的值是middle，而水平居中align的值是center，虽然同是居中但关键字不同

感谢各位的阅读，以上就是“div垂直居中的方法有哪些”的内容了，经过本文的学习后，相信大家对div垂直居中的方法有哪些这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是编程网，小编将为大家推送更多相关知识点的文章，欢迎关注！

--结束END--

本文标题: div垂直居中的方法有哪些

本文链接: https://lsjlt.com/news/251596.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • div垂直居中的方法有哪些
    这篇文章主要讲解了“div垂直居中的方法有哪些”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“div垂直居中的方法有哪些”吧！在说到这个问题的时候，也许有人会问CSS中不是有vertical-...
    99+
    2023-06-08
  • div+css垂直居中的方法有哪些
    这篇文章主要介绍“div+css垂直居中的方法有哪些”，在日常操作中，相信很多人在div+css垂直居中的方法有哪些问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”div+cs...
    99+
    2024-04-02
  • div盒子水平垂直居中的方法有哪些
    今天小编给大家分享一下div盒子水平垂直居中的方法有哪些的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来...
    99+
    2024-04-02
  • html垂直居中的方法有哪些
    今天小编给大家分享一下html垂直居中的方法有哪些的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。1. 使用 FlexboxF...
    99+
    2023-07-06
  • CSS垂直居中实现方法有哪些
    这篇文章主要介绍了CSS垂直居中实现方法有哪些，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。line-height：复制代码代码如下:<...
    99+
    2024-04-02
  • CSS水平垂直居中的方法有哪些
    这篇文章主要介绍“CSS水平垂直居中的方法有哪些”，在日常操作中，相信很多人在CSS水平垂直居中的方法有哪些问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”CSS水平垂直居中的...
    99+
    2024-04-02
  • CSS中有哪些实现垂直居中的方法
    CSS中有哪些实现垂直居中的方法，很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。CSS垂直居中的几种方法利用CSS来实现对象的垂...
    99+
    2024-04-02
  • CSS中实现垂直居中的方法有哪些
    本篇文章给大家分享的是有关CSS中实现垂直居中的方法有哪些，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。方法1：table-cellhtml结...
    99+
    2024-04-02
  • div内容水平居中与div内容垂直居中的方法
    本文小编为大家详细介绍“div内容水平居中与div内容垂直居中的方法”，内容详细，步骤清晰，细节处理妥当，希望这篇“div内容水平居中与div内容垂直居中的方法”文章能帮助大家解决疑惑，下面跟着小编的思路慢...
    99+
    2024-04-02
  • Div实现水平或垂直居中的方法
    本篇内容主要讲解“Div实现水平或垂直居中的方法”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“Div实现水平或垂直居中的方法”吧!先来看一个最普通的实现示例：创...
    99+
    2024-04-02
  • 让html img图片垂直居中的方法有哪些
    本篇内容介绍了“让html img图片垂直居中的方法有哪些”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！ ...
    99+
    2024-04-02
  • css水平垂直居中的方式有哪些
    这篇文章主要讲解了“css水平垂直居中的方式有哪些”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“css水平垂直居中的方式有哪些”吧！ 如无特殊说明，以下示...
    99+
    2024-04-02
  • CSS垂直居中的技巧有哪些
    本篇内容主要讲解“CSS垂直居中的技巧有哪些”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“CSS垂直居中的技巧有哪些”吧!1、Line-height适用情景：单...
    99+
    2024-04-02
  • CSS让div垂直居中的多种方法分享
    本篇内容主要讲解“CSS让div垂直居中的多种方法分享”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“CSS让div垂直居中的多种方法分享”吧!在说到这个问题的时...
    99+
    2024-04-02
  • DIV+CSS让浮动元素垂直居中的方法
    这篇文章主要讲解了“DIV+CSS让浮动元素垂直居中的方法”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“DIV+CSS让浮动元素垂直居中的方法”吧！场景：在...
    99+
    2024-04-02
  • CSS html图片水平垂直居中的方法有哪些
    今天小编给大家分享一下CSS html图片水平垂直居中的方法有哪些的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面...
    99+
    2024-04-02
  • css如何让div垂直居中
    这篇文章主要介绍了css如何让div垂直居中，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。css让div垂直居中的方法：1、使用绝对定位和负外边距进行居中；2、利用伪元素和i...
    99+
    2023-06-15
  • css实现任意图片垂直居中的方法有哪些
    这篇文章主要讲解了“css实现任意图片垂直居中的方法有哪些”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“css实现任意图片垂直居中的方法有哪些”吧！方法一：...
    99+
    2024-04-02
  • CSS3不定高宽垂直水平居中的方法有哪些
    这篇文章给大家分享的是有关CSS3不定高宽垂直水平居中的方法有哪些的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。flex布局.father {    displa...
    99+
    2023-06-08
  • CSS实现水平垂直居中的方式有哪些
    这篇文章主要介绍“CSS实现水平垂直居中的方式有哪些”，在日常操作中，相信很多人在CSS实现水平垂直居中的方式有哪些问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”CSS实现水...
    99+
    2024-04-02
软考高级职称资格查询
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作